滚动后固定导航栏？

Question

我在 header 之后有一个导航栏，我希望它在向下滚动时停留在页面顶部。

我可以使用position:relative吗？？ 与 position 不同：借助以下脚本或任何其他更好的方法修复？

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

这是我的小提琴！

黑色背景条卡在页面顶部

请帮我解决这个问题，在此先感谢您。

Answer 1

这是您想要得到的吗？

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 = "";
    }
}

小提琴

Answer 2

你可以用css解决它：

html：

    <nav id= "header">
      <ul>
        <li><a href="#"> Link 1 </a></li>
        <li><a href="#"> Link 2 </a></li>
        <li><a href="#"> Link 3 </a></li>
      </lu>
    </nav>

css：

    #header{
    position: sticky;
    top: 0; /* Position where u want it to stick, can be a
               percentage, px, vh or any position unit */
    z-index:150; /* to keep it on top layer in order not to be 
                    masked by another element*/
    }

检查此链接： https://elextutorial.com/learn-css/css-position-fixed-scroll-sticky/