js scroll案例,当到一定程度时,元素由绝对定位改为固定定位window.pageXOffset

js scroll案例,当到一定程度时,元素由绝对定位改为固定定位window.pageXOffset_第1张图片


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
        body {
            height: 5000px;
        }

        .slider-bar {
            position: absolute;
            right: 0;
            width: 100px;
            height: 150px;
            top: 600px;
            border: black solid 1px;
            background-color: #e64942;
            float: right;
        }
        .banner {
            height: 1000px;
            background-color: pink;
        }
        .a{
            height: 500px;
            background-color: #6db8ff;
        }
    style>
head>
<body>
<div class="slider-bar">
    <span>span>
div>
<div class="a">div>
<div class="banner">头部区域div>
body>




<script>
    //1.获取元素
    var sliderbar = document.querySelector('.slider-bar');
    var banner = document.querySelector('.banner');
    //banner.offsetTop是初始banner距离头部的距离,同时在本案例中大于滚动大于该距离时固定元素
    var bannerTop = banner.offsetTop;
    console.log(bannerTop)
    //侧边栏固定后的数值
    var sliderbarTop = sliderbar.offsetTop - bannerTop;
    //2.页面滚动事件
    document.addEventListener('scroll', function () {
        console.log(window.pageYOffset);  //页面被卷去的距离
        //3.当页面被卷去的头部大于等于一开始banner距离页面最上方的高度时,侧边栏改为固定方位
        if (window.pageYOffset >= bannerTop) {
            sliderbar.style.position = 'fixed';
            sliderbar.style.top = sliderbarTop + 'px';

        } else {
            sliderbar.style.position = 'absolute';
            sliderbar.style.top = '600px';
        }
    })
script>
html>

你可能感兴趣的:(javascript)