浏览器卷去的高度固定 js

最新推荐文章于 2022-12-09 17:33:49 发布

Mr._Dang

最新推荐文章于 2022-12-09 17:33:49 发布

阅读量138

点赞数 1

分类专栏： JavaScript基础文章标签： javascript js

本文链接：https://blog.csdn.net/m0_55832273/article/details/119789132

版权

JavaScript基础专栏收录该内容

30 篇文章 2 订阅

订阅专栏

先看效果，代码在下面

在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .banner {
            width: 100%;
            height: 200px;
            background-color: cyan;
        }

        .title-box {
            width: 100%;
            height: 50px;
            line-height: 50px;
            background-color: #ddd;
            text-align: center;
        }

        .content {
            width: 100%;
            height: 2000px;
            background-color: darkmagenta;
        }

        .fixed {
            position: fixed;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div class="banner"></div>
    <div class="title-box">
        <!-- 外层的div是为了防止内层的div脱离文档流撑起页面，不让页面标准流高度减少 -->
        <div class="title-box">
            <span>精选</span>
            <span>严选</span>
            <span>优选</span>
        </div>
    </div>

    <div class="content">
        1111232657挥洒大家看法啊动画设计开发个撒电话的撒回家给范德萨过分哈速度加快国防函数口感还是短发两个回教室看看
    </div>
    <script>
        var titleBox = document.querySelectorAll('.title-box')[1]
        var titleOut = document.querySelectorAll('.title-box')[0]
        console.log(titleOut.offsetTop)
        // 页面绑定滚动事件
        window.onscroll = function () {
            var topHeight = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset;
            console.log(topHeight)
            //让滚到的高度到达title行的上方的时候固定在顶部
            if (topHeight >= titleOut.offsetTop) {
                titleBox.classList.add('fixed')
            } else {
                //让滚到的高度小于title行的上方的时候取消固定定位
                titleBox.classList.remove('fixed')
            }

        }

    </script>
</body>

</html>

Mr._Dang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
浏览器卷去的高度固定 js

先看效果，代码在下面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &.
复制链接

扫一扫