window.pageYOffset案例：淘宝侧边栏滚动效果

最新推荐文章于 2024-03-17 23:39:10 发布

新生代农民工官方认证码农小拽

最新推荐文章于 2024-03-17 23:39:10 发布

阅读量346

点赞数

本文链接：https://blog.csdn.net/tuzi007a/article/details/105460232

版权

<!DOCTYPE HTML>
<html>
 <head>
  <title>window.pageYOffset案例：淘宝侧边栏滚动效果</title>
  <meta charset="utf-8" />
  <style>
   * {
    margin: 0;
    padding: 0;
    }
   .typeArea {
     position: relative;
     width: 1200px;
     margin: 0 auto;
     font-size: 20px;
     text-align: center;
     font-weight: 700;
    }
   #hea {
    width: 100%;
    height: 200px;
    background-color: pink;
   }
   #banner {
    width: 100%;
    height: 500px;
    background-color: purple;
   }
   #main {
    width: 100%;
    height: 800px;
    background-color: blue;
   }
   #sidebar {
    position: absolute;
    right: 280px;
    top: 500px; 
    width: 70px;
    height: 400px;
    background-color: yellow;
   }
   #gohead {
     display: none;
    }
  </style>
 </head>
 <body>
  <div class="typeArea">
    <header id="hea">header200</header>
    <div id="banner">banner500</div>
    <div id="main">main800</div>
   </div>
   <div id="sidebar">
    <span id="gohead">回到顶部</span>
   </div>

  <script>
   var side = document.getElementById('sidebar');
   var gohead = document.getElementById('gohead');
   document.addEventListener('scroll', function() {
    if(window.pageYOffset >= 500) {
      side.style.position = 'fixed';
      side.style.top = '0';
      gohead.style.display = "block";
     }
      else {
        side.style.position = 'absolute';
        side.style.top = '500px';
        gohead.style.display = "none";
       }
    //console.log(window.pageYOffset);
   })
     
  </script>
 </body>
</html>

新生代农民工官方认证码农小拽

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
window.pageYOffset案例：淘宝侧边栏滚动效果

<!DOCTYPE HTML><html> <head> <title>window.pageYOffset案例：淘宝侧边栏滚动效果</title> <meta charset="utf-8" /> <style> * { margin: 0; padding: 0; ...
复制链接

扫一扫