ECSTORE导航吸顶功能

ecstore导航吸顶功能,在导航父元素中加入id,如:

 1 <div id="mainNav1"></div> 

在footer.html中添加以下js代码:

 1     <script type="text/javascript">function getTop(e)
 2     {
 3         var offset=e.offsetTop;
 4         if(e.offsetParent!=null) //只要还有父元素,也就是当前元素不是根节点就继续往上累计元素的高度
 5             offset+=getTop(e.offsetParent);
 6         return offset;
 7     }
 8     var myBlockTop = getTop(document.getElementById("mainNav1"));
 9     var oneDiv=document.getElementById("mainNav1");
10     if(!!window.attachEvent)//ie浏览器下。
11     {
12         window.attachEvent('**croll',function(){
13                         if(document.documentElement.scrollTop/* +  (document.body.clientHeight || window.innerHTML) */>= myBlockTop)
14                         {oneDiv.style.position="fixed";oneDiv.style.top="0";oneDiv.style.left="0";oneDiv.style.display="block";oneDiv.style.zIndex="9999999999999";oneDiv.style.height="35px";oneDiv.innerHTML = document.getElementById("mainNav").innerHTML; }
15                         else{oneDiv.style.display="none";}
16  
17         });
18     }
19     if(!!window.addEventListener)//非ie浏览器下
20     {
21         window.addEventListener("scroll",function(){//document.body.scrollTop可保证chrome的正常。
22             if(document.documentElement.scrollTop/* +  (document.body.clientHeight || window.innerHTML) */>= myBlockTop||document.body.scrollTop>=myBlockTop)
23             {oneDiv.style.position="fixed";oneDiv.style.top="0";oneDiv.style.width="100%";oneDiv.style.zIndex="9999999999999";oneDiv.style.display="block";oneDiv.style.height="35px";oneDiv.innerHTML =document.getElementById("mainNav").innerHTML;}
24             else{oneDiv.style.display="none";}
25         });
26     }</script>

测试看看效果吧~

posted @ 2014-11-05 17:10  cheungkaming  阅读(338)  评论(0编辑  收藏  举报