Imitation Taobao fixed sidebar

case study:

1, the original sidebar is absolute positioning

2, when the page is scrolled to a certain location (here is a rolling time to reach the top of the page banner), sidebar changed to a fixed positioning

3, pages continue to roll, let "Top" is displayed (scroll to the top of the page when the main arrival)

4, need to use the page scroll scroll event because it is the page scrolling, the event is a source document

5, to a scroll position, the upper value of the page is determined to be the volume of

6, the head of the page to be wound, can be obtained by window.pageYoffset, if the volume is left to

window.pageXoffset

7, note that element is rolled to the head is element.scrollTop, if the page is rolled to the head is

window.pageYoffset

8, in fact, this value can be obtained by offsetTop box, if greater than or equal to this value, you can make fixed positioning of the box

The complete code

<!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; // time reaches the top of the page banner, the page size of the head to be rolled, the roll must be written out var slideBarTop = SlideBar bannerTop-.offsetTop;   // fixed positioning should then change the value of var main = document.querySelector ( " .main " );
     var goBack = document.querySelector ( " .goBack " );
     var MAINTOP = main.offsetTop; // 1, page scrolling event the scroll 
    document.addEventListener ( " the scroll ");
    
    
    

    , function () {
         IF (window.pageYOffset> = bannerTop) 
        { 
            slideBar.style.position = " Fixed " ; 
            slideBar.style.top = slideBarTop + " PX " ; 
        } 
        the else { 
            slideBar.style.position = " Absolute " ; 
            SlideBar .style.top = 300 + " PX " ; 
        } 

        // 2, when the page scrolls to the main box is displayed goBack module ( "top") 
        iF (window.pageYOffset> = MAINTOP) 
        {
            goBack.style.display="block";
        }
        else{
            goBack.style.display="none";
        }
    })
</script>

Key Code

1, the front page scroll, first obtain the value bannerTop the top of the banner from the page, the sidebar is a value judgment becomes fixed positioning from absolute positioning

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

2. Similarly, the front page scrolls to the top of the main mainTop value obtained from the page, even goBack ( "Top") from the displayed value determination becomes Hide

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

3, a sidebar from the top of the page beginning 300px, when the sidebar fixed positioning, should re-determine the value of its distance from the top of the page

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";
}

Imitation Taobao fixed sidebar

Guess you like