导航栏固定后滚动？

问题描述

我有一个导航栏后面的标题，我想要停留在页面顶部，同时向下滚动。

I have a navigation bar after header and i want that to be stuck at top of the page while scrolling down.

可以使用 position：相对？不像位置：借助下面的脚本或任何其他更好的方法固定？

can i do with position:relative?? Unlike position:fixed with the help of the following script or any other better way?

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

这里是我的！

黑色背景栏卡在页面顶部

black color background bar to be stuck at the top of the page

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

please help me out to fix that, thank you in advance.

推荐答案

是您想要获得什么？

Is this what you're trying to get?

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 。

---

Update: (I think, not sure) you can't scroll a fixed element, but you can an absolute one. So in the code below we're using position: absolute but making it behave like it's fixed. Now you can see the #header when you zoom in and scroll down.

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

这篇关于导航栏固定后滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！