现在的位置: 网页制作教程＞ JS网页特效＞正文

下拉滚动条图层元素始终显示在最上方的js效果

发表于2016/11/22 ⁄ JS网页特效 ⁄ 1条评论 ⁄ 热度 3,014℃

利用js代码实现滚动条下拉，图层元素始终显示在页面的最上方的效果。通常用在导航栏和搜索栏上。

<!doctype html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>adsorption</title>
  <style type="text/css">
  *{ margin: 0; padding: 0; }
  .header-wrap{ width: 100%; }
  .header-hd{ width: 980px; height: 150px; margin: 0 auto; background-color: #ccc; }
  .header-bd{ width: 980px; height: 40px; margin: 0 auto; background-color: green; }
  .fixed{ position: fixed; width: 100%; }
  .fixed .header-hd{ display: none; }
  </style>
 <script type="text/javascript">
  window.onload=function(){
  function adsorption(){
  var headerWrap=document.getElementById('header-wrap');
  var scrollTop=0;
  window.onscroll=function(){
  scrollTop=document.body.scrollTop||document.documentElement.scrollTop;
  if(scrollTop>100){
  headerWrap.className='fixed';
  }else{
  headerWrap.className='header-wrap';
  }
  }
  }
  adsorption();
  }
  </script>
  </head>
  <body style="height:3000px;">
  <div id="header-wrap" class="header-wrap">
  <div class="header-hd"></div>
  <div class="header-bd"></div>
  </div>
  </body>
</html>

运行代码提示：您可以先修改部分代码再运行。

声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/234.html