1. Properties of the scroll series

The translation of scroll is scrolling. We can dynamically obtain the size and scrolling distance of the element by using the related attributes of the scroll series.

Notice:

1. The actual width and height should consider the situation that the content exceeds the border, and when it exceeds, include the length of the excess part.

2. If the height (or width) of the browser is not enough to display the entire page, scroll bars will appear automatically. When the scroll bar scrolls down, the hidden height above the page is called the rolled head of the page. The onscroll event is fired when the scrollbar is scrolling .

Case: imitating Taobao to fix the right sidebar

1. The original sidebar is absolutely positioned

2. When the page scrolls to a certain position, the sidebar is changed to a fixed position

3. The page continues to scroll, and the return to the top will be displayed

case analysis:

The page scrolling event scroll is needed because it is page scrolling, so the event source is document

Scrolling to a certain position is to judge the upper value of the page being rolled away.

The head of the page that is rolled away: it can be obtained through window.pageYOffset if it is the left window.pageXOffset that is rolled away

Note that the head of the element that is rolled away is element.scrollTop , and if the head of the page is rolled away, it is window.pageYOffset

In fact, this value can be obtained through the offsetTop of the box. If it is greater than or equal to this value, the box can be fixed in position.

Realize the effect:

Implementation code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .slider-bar {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
        }
        
        .w {
            width: 1200px;
            margin: 10px auto;
        }
        
        .header {
            height: 150px;
            background-color: purple;
        }
        
        .banner {
            height: 250px;
            background-color: skyblue;
        }
        
        .main {
            height: 1000px;
            background-color: yellowgreen;
        }
        
        span {
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner区域</div>
    <div class="main w">主体部分</div>
    <script>
        //1. 获取元素
        var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        // banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面
        var bannerTop = banner.offsetTop
            // 当我们侧边栏固定定位之后应该变化的数值
        var sliderbarTop = sliderbar.offsetTop - bannerTop;
        // 获取main 主体元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;
        // 2. 页面滚动事件 scroll
        document.addEventListener('scroll', function() {
            // console.log(11);
            // window.pageYOffset 页面被卷去的头部
            // console.log(window.pageYOffset);
            // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
            if (window.pageYOffset >= bannerTop) {
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop + 'px';
            } else {
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = '300px';
            }
            // 4. 当我们页面滚动到main盒子，就显示 goback模块
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }

        })
    </script>
</body>

</html>

Head Compatibility Solution for Pages Rolled Off

It should be noted that the headers that are rolled away from the page have compatibility issues, so the headers that are rolled away are usually written in the following ways:

1. Declare the DTD, use document.documentElement.scrollTop

2. No DTD declared, use document.body.scrollTop

3. The new method window.pageYOffset and window.pageXOffset, IE9 began to support

 function getScroll() {
    return {
      left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
      top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
    };
 } 
使用的时候  getScroll().left

Reference: Dark Horse Programmer

BOM---scroll series

1. Properties of the scroll series

Case: imitating Taobao to fix the right sidebar

Guess you like