js案例:固定侧边栏

m0_63400611

已于 2022-05-18 16:07:10 修改

阅读量425

点赞数

分类专栏： js 文章标签： javascript 前端 css3

于 2022-01-19 21:05:20 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/122585675

版权

js 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

分析

需要用到页面滚动事件scrol,事件源为document
滚动到指定位置,就是判断页面被卷去的上部值
页面被卷去的头部,可以通过window.pageYOffset获得,如果是左侧则window.pageXoffset
元素被卷去的头部是element.scrollTop,如果是页面被卷去的头部则是window.pageYOffset

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>333333</title>
	<style>
        .w {
            width: 1200px;
            margin: 20px auto;
        }
        .slider-bar {
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
        }
        .header {
            height: 200px;
            background-color: purple;
        }
        .banner {
            height: 500px;
            background-color: skyblue;
        }
        .main {
            height: 500px;
            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>

    var sliderbar = document.querySelector('.slider-bar');
    var banner = document.querySelector('.banner');
    var Psliderbar = sliderbar.offsetTop;
    var bannerTop = banner.offsetTop;
    var sliderbarTop = sliderbar.offsetTop - banner.offsetTop;

    document.addEventListener('scroll', function () {
        console.log(window.pageYOffset);
        //被卷去的头部≥172时 侧边栏改为固定定位
        if(window.pageYOffset >= bannerTop) {
            sliderbar.style.position = 'fixed';
            sliderbar.style.top = sliderbarTop + 'px';
        } else {
            sliderbar.style.position = 'absolute';
            sliderbar.style.top = Psliderbar + 'px';
        }
    })

</script>
	
</body>
</html>

案例中问题的解决方法

1.滚动到指定位置时,sliderbar元素跳动位置

指定sliderbar移动到banner顶部时定位position改为fixed,计算出原本sliderbar和banner的offsetTop的差,并将此值赋值给定位已经改变为fixed的sliderbar元素,即可防止跳动位置

2.当往回滚动页面距离不到banner上方时,sliderbar元素跳动位置

在全局变量指定一个变量,将sliderbar原本的top值赋值给这个变量进行储存,当被卷去的距离不到banner上方时,将这个变量重新赋值给sliderbar的top值,并将定位方式改回absolute

页面被卷去的头部兼容性解决方案

声明了DTD(<!doctype html>),使用document.documentElement.scrollTop
未声明DTD,使用document.body.scrollTop
新方法window.pageYOffset和window.pageXOffset,IE9开始支持

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;

m0_63400611

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js案例:固定侧边栏

分析需要用到页面滚动事件scrol,事件源为document 滚动到指定位置,就是判断页面被卷去的上部值页面被卷去的头部,可以通过window.pageYOffset获得,如果是左侧则window.pageXoffset 元素被卷去的头部是element.scrollTop,如果是页面被卷去的头部则是window.pageYOffset代码<!doctype html><html><head><meta charset="utf-8"&gt
复制链接

扫一扫

专栏目录