当前位置: 代码迷 >> Web前端 >> 侧领航-20131105
  详细解决方案

侧领航-20131105

热度:253   发布时间:2013-11-13 14:04:18.0
侧导航-20131105
.anim_nav{position: fixed; left: 50%; margin-left: 500px; top: 200px; overflow: hidden; _position: absolute; _top: expression(eval(documentElement.scrollTop+200));}


<div class="anim_nav" id="J_ActivityNav" style="position: fixed; top: 50px;">
    	<img src="http://gtms01.alicdn.com/tps/i1/T1obAtFXtgXXaoaIQ3-128-427.jpg" width="128" height="427" border="0" usemap="#Map2"/>
        <map name="Map2" id="Map2">
          <area shape="rect" coords="5,60,125,35" href="#link1" target="_self" />
          <area shape="rect" coords="5,90,125,65" href="#link2" target="_self" />
          <area shape="rect" coords="5,120,125,95" href="#link3" target="_self" />
          <area shape="rect" coords="5,150,125,125" href="#link4" target="_self" />
          <area shape="rect" coords="5,185,125,160" href="#link5" target="_self" />
          <area shape="rect" coords="5,215,125,190" href="#link6" target="_self" />
          <area shape="rect" coords="5,275,125,300" href="#link7" target="_self" />
          <area shape="rect" coords="5,305,125,330" href="#link8" target="_self" />
          <area shape="rect" coords="5,335,125,360" href="#link9" target="_self" />
          <area shape="rect" coords="5,365,125,390" href="#link10" target="_self" />
          <area shape="rect" coords="5,395,125,420" href="#" target="_self" />
        </map>
	</div>

</script>
<script type="text/javascript">
    (function () {
        //检查是否是ie6的游览器
        var nav = document.getElementById('J_ActivityNav'), isIE6 = KISSY.UA.ie === 6;
        //这里是设定高度的px
        var _top = 554;
        function navCheck () {
            //获得当前的高度
            var t = document.documentElement.scrollTop || document.body.scrollTop;
            
                //一个判断
                if (t >= _top) {
                //如果不是ie6
                if (!isIE6) {
                    //就环定位效果
                    nav.style.position = "fixed";
                    //定义样式里的高度
                    nav.style.top = '0'
                } else {
                    //否则 高度是加上t+px
                    nav.style.top = t + 'px';
                }
            } else {
                //判断时候是ie6
                if (!isIE6) {
                    //不是的话 在滚轮触及到位置 定位方式转变
                    nav.style.position = "absolute";
                    //top的距离
                    nav.style.top = _top+'px'
                } else {
                    //否则还是定义头部距离
                    nav.style.top = _top+'px';
                }
            }
        }
        //返回函数
        navCheck();
        window.onscroll = function () {
            navCheck();
        }
    })();
</script>
  相关解决方案