首页 > 代码库 > ECSTORE导航吸顶功能
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>
测试看看效果吧~
ECSTORE导航吸顶功能
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。