滚动固定效果制作

最新推荐文章于 2024-10-11 17:39:47 发布

weixin_30437337

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量76

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/maoqiaoyu123/p/8017845.html

版权

网页中常会看到一个菜单栏会本来在一个固定的位置上，等页面往下滚动的时候，它会先到顶部，再和页面一起往下走，这种效果同样是需要使用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>