滚动固定效果制作
Posted 23滴雨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了滚动固定效果制作相关的知识，希望对你有一定的参考价值。
网页中常会看到一个菜单栏会本来在一个固定的位置上，等页面往下滚动的时候，它会先到顶部，再和页面一起往下走，这种效果同样是需要使用JS来实现。
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{ margin:0px auto; padding:0px;} #top{ width:100%; height:200px; background-color:#FFC;} #lb{ width:100%; height:50px; background-color:#009;} .nr{ width:1200px; height:500px; background-color:#C9F; margin-top:20px;} </style> </head> <body> <div id="top"></div> <div id="lb"></div> <div class="nr"></div> <div class="nr"></div> <div class="nr"></div> </body> <script type="text/javascript"> //添加一个滚动条监听事件 var l = document.getElementById("lb"); window.onscroll=function(){ if(window.scrollY>=200){ //使该元素固定 l.style.position="fixed"; l.style.top="0px"; } else{ l.style.position=""; } } </script> </html>
其中用到了一个新的事件：onscroll为元素滚动时执行；并且使用到了“position="fixed"”这个样式对这个<div>进行了定位，即可呈现出下面的这种效果：
一开始的页面：
滚动后效果：
以上是关于滚动固定效果制作的主要内容，如果未能解决你的问题，请参考以下文章