仿淘宝固定侧边栏

Posted shanlu0000

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了仿淘宝固定侧边栏相关的知识，希望对你有一定的参考价值。

技术图片

案例分析：

1，原先侧边栏是绝对定位

2，当页面滚动到一定位置（这里是滚动到 banner 到达页面顶部的时候），侧边栏改为固定定位

3，页面继续滚动，会让 “ 返回顶部 ” 显示出来 （滚动到 main 到达页面顶部的时候）

4，需要用到页面滚动事件 scroll 因为是页面滚动，所以事件源是document

5，滚动到某个位置，就是判断页面被卷去的上部值 

6，页面被卷去的头部，可以通过window.pageYoffset 获得，如果是被卷去的左侧

     window.pageXoffset

7，注意，元素被卷去的头部是 element.scrollTop ，如果是页面被卷去的头部则是

      window.pageYoffset

8，其实这个值，可以通过盒子的 offsetTop 可以得到，如果大于等于这个值，就可以让盒子固定定位了

 

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .slide-bar
            width:45px;
            height:130px;
            margin-left:600px;
            position:absolute;
            left:50%;
            top:300px;
            background-color: pink;
        
        .header
            width:1200px;
            height:150px;
            background-color: purple;
            margin:10px auto;
        
        .banner
            width:1200px;
            height:250px;
            background-color: skyblue;
            margin:10px auto;
        
        .main
            width:1200px;
            height:1000px;
            background-color: yellowgreen;
            margin:10px auto;
        
        span
            position:absolute;
            bottom:0;
            display:none;
        
    </style>
</head>
<body>
<div class="slide-bar">
    <span class="goBack">返回顶部</span>
</div>
<div class="header">头部区域</div>
<div class="banner">banner区域</div>
<div class="main">主体区域</div>
</body>
</html>
<script>
    var slideBar=document.querySelector(".slide-bar");
    var banner=document.querySelector(".banner");
    var bannerTop=banner.offsetTop; //banner到达页面顶部时，页面被卷去的头部的大小，一定要写到滚动的外面
    var slideBarTop=slideBar.offsetTop-bannerTop;  //固定定位之后，应该变化的数值
    var main=document.querySelector(".main");
    var goBack=document.querySelector(".goBack");
    var mainTop=main.offsetTop;

    //1,页面滚动事件 scroll
    document.addEventListener("scroll",function () 
        if (window.pageYOffset >= bannerTop)
        
            slideBar.style.position="fixed";
            slideBar.style.top=slideBarTop+"px";
        
        else
            slideBar.style.position="absolute";
            slideBar.style.top=300+"px";
        

        //2，当页面滚动到main盒子，就显示 goBack 模块（“返回顶部”）
        if (window.pageYOffset >=mainTop)
        
            goBack.style.display="block";
        
        else
            goBack.style.display="none";
        
    )
</script>

 

关键代码

1，页面滚动前，先获得 banner距离页面顶部的值 bannerTop , 就是 侧边栏 从绝对定位变成固定          定位的 判断值

 var bannerTop=banner.offsetTop;
document.addEventListener("scroll", function()
   if(window.pageYoffset >= bannerTop)
   
      slideBar.style.position="fixed";
   
)

2, 同样，页面滚动前，先获得 main 距离页面顶部的值 mainTop, 即使 goBack("返回顶部“）从隐藏      变为显示的判断值

var mainTop=main.offsetTop;
document.addEventListener(”scroll", function() 
  if(window.pageYoffset >=mainTop)
  
     goBack.style.display="block";
  
  else
     goBack.style.display="none";
  
 )

3, 侧边栏一开始距离页面顶部300px ,  当侧边栏固定定位时，应该重新确定它距离页面顶部的值

var slideBarTop=slideBar.offsetTop-bannerTop;
if(window.pageYoffset >=bannerTop)

   slideBar.style.position="fixed";
   slideBar.style.top=slideBarTop + "px";

else
    slideBar.style.position="absolute";
    slideBar.style.top=300+"px";

 

以上是关于仿淘宝固定侧边栏的主要内容，如果未能解决你的问题，请参考以下文章

js仿淘宝侧边栏滚动条

Web API （scroll系列）（仿淘宝侧边栏效果实现）（mouseenter与mouseover的区别）（动画的原理）（缓动动画）

jquery实现仿京东侧边栏

jQuery实际案例⑤——仿京东侧边栏（楼层）

Bootstrap 4 固定顶部导航和固定侧边栏

固定侧边栏内部包装 div