[笔记]页面滑动顶部导航栏固定效果 控制顶部scrolltop的方法

    选择打赏方式

微信公众号伊伊兔Yi-Yi-Tu,QQ群号:455535550,淘宝天猫优惠劵领取网站:dy208.cn

效果可以参考我博客的导航栏,页面下滑时你会发现它固定在顶部了,怎么做的呢?

先说一下jquery的写法

主要原因是谷歌浏览器不识别document.documentElement.scrollTop

所以先说jquery内置的scrollTop()方法,

 window.addEventListener('scroll', function () {
        let t = $('body, html').scrollTop(); 
        if (t > 0) {
            $('.box').addClass('box-active')
        } else {
            $('.box').removeClass('box-active')
        }
    })


// 目前监听的是整个body的滚动条距离浏览器顶部的距离,.box便是导航,导航距离顶部>0px的时候给他添加一个样式box-active

 .box-active {
        position: fixed;
        top: 0;
    }


完整的例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<script src="https://lib.baomitu.com/jquery/1.12.4/jquery.js"></script>
<div class="box">子成君QAQ</div>
<div id="sd"> 子成君QAQ </div>
<style>
    #sd {
        height: 1900px;
        border: 1px solid aqua;
    }

    .box {
        transition: all 1s;
        background: #000;
        position: relative;
        height: 80px;
        width: 100%;
        z-index: 999;
    }

    .box-active {
        height: 40px;
        position: fixed;
        top: 0;
    }
</style>
<script>
    window.addEventListener('scroll', function () {
        let t = $('body, html').scrollTop();   
        if (t > 0) {
            $('.box').addClass('box-active')
        } else {
            $('.box').removeClass('box-active')
        }
    })
</script>
</body>
</html> 


如果原生js你可以用

var scrolltop=document.documentElement.scrollTop||document.body.scrollTop;

来获取scrolltop,因为刚刚说了谷歌浏览器获取不到document.documentElement.scrollTop,

所以采用document.documentElement.scrollTop||document.body.scrollTop这样的方式来兼容所有浏览器.

具体效果自测。

版权声明:若无特殊注明,本文皆为《 子成君 》原创,转载请保留文章出处。
本文链接:[笔记]页面滑动顶部导航栏固定效果 控制顶部scrolltop的方法 https://www.zcjun.com/learn/411.html
百度收录:本文已被百度收录点击查看详情!
本文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

爱你允悲悲伤吃惊委屈可怜憧憬吃瓜大哭开心坏笑笑哭哼打哈欠鼓掌乖嘘阴险日了狗费解挤眼滑稽666比心


既然没有吐槽,那就赶紧抢沙发吧!