ECSTORE導航吸頂功能

標籤：style   blog   io   color   ar   os   java   sp   div   

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>

測試看看效果吧~

ECSTORE導航吸頂功能