Question

标题后面有一个导航栏，我希望在向下滚动的同时将其卡在页面顶部。

我可以用位置：相对吗？与位置不同：借助以下脚本或任何其他更好的方法修复？

$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
    $('#header').css('top', $(window).scrollTop());
}});

这是我的fiddle！

黑色背景栏被卡在页面顶部

请帮我解决，提前谢谢你。

Answer 1

this你想要得到什么？

window.onscroll = changePos;

function changePos() {
    var header = document.getElementById("header");
    if (window.pageYOffset > 70) {
        header.style.position = "fixed";
        header.style.top = "0";
    } else {
        header.style.position = "";
        header.style.top = "";
    }
}

更新：（我想，不确定）你不能滚动固定元素，但你可以绝对一个。因此，在下面的代码中，我们使用的是position: absolute，但使其行为类似于fixed。现在，当您放大并向下滚动时，您可以看到#header。

window.onscroll = changePos;

function changePos() {
    var header = document.getElementById("header");
    if (window.pageYOffset > 70) {
        header.style.position = "absolute";
        header.style.top = pageYOffset + "px";
    } else {
        header.style.position = "";
        header.style.top = "";
    }
}

FIDDLE

滚动后固定导航栏？

1 个答案: