获取scrollTop实现滚动鼠标后悬浮导航

最新推荐文章于 2023-03-07 14:32:45 发布

原创最新推荐文章于 2023-03-07 14:32:45 发布 · 594 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #鼠标 #函数

javascript 专栏收录该内容

40 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的网页导航悬浮效果。通过监听滚动事件并获取当前滚动位置，可以判断导航栏是否需要固定在顶部。代码示例中详细展示了如何设置导航栏的位置，并在页面滚动时切换其样式。

获取scrollTop：

document.documentElement.scrollTop || document.body.scrollTop

鼠标滚轮事件：

onscroll

事件；

悬浮导航例子：

//导航悬浮
var navT = 0;
window.onload = function () {
    var navBox = document.getElementById("navBox");
    var navT = navBox.offsetTop;
    window.onscroll = function () {
        var t = document.documentElement.scrollTop || document.body.scrollTop;
        if (t > navT) {
            navBox.style.position = "fixed";
            navBox.style.top = "0";
        }
        else {
            navBox.style.position = "absolute";
            navBox.style.top = "725px";
        }
    }
}