元素滚动吸顶是很常见的一种页面形式
比方说导航条,在你滚动页面时,导航条到达页面顶部后,将一直显示在页面顶部,不随滚动而滚动,
当你下拉后,又会恢复原来的位置。
讲一种比较简单的实现方式,其他的方式 我后续再做讲解。
<html><head><metacharset="utf-8"><title>吸顶测试</title><scriptsrc="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script></head><body><p>如果你点我,我就会消失。</p><p>继续点我!</p><p>接着点我!</p><divid="myDiv"style="border:1px solid red;">我是吸顶的div</div><divstyle="height:1000px;"></div></body><script>varheaddiv=document.getElementById("myDiv"); varnTop=headdiv.offsetTop; $(window).scroll(function() { letscrollTop=$(this).scrollTop(); if(scrollTop>=nTop){ headdiv.style.position="fixed"; headdiv.style.top="0px"; headdiv.style.zIndex="2"; }else{ headdiv.style.position="relative"; } }); </script></html>