导航栏固定后滚动？ [英] Navigation bar fixed after scroll?

问题描述

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

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());
}});

这里是我的 fiddle ！

黑色背景栏卡在页面顶部

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

FIDDLE

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