滚动到正确位置时将导航栏保持在页面顶部答案

【问题标题】：Keep navbar at top of page when scrolled to correct position滚动到正确位置时将导航栏保持在页面顶部
【发布时间】：2015-07-08 21:04:24
【问题描述】：

所以对于我的网站，我有一个标题。在标题的顶部我有我的标志和口号，在下面我有我的导航栏。当用户向下滚动时，我希望标题的顶部（徽标和标语）消失，而导航栏应保持固定。我知道这需要添加一些position:fixed;，但是只有在正确的位置才能激活它。我之前曾对媒体查询进行过一些研究。是否有一个用于 y 滚动的？

谢谢

【问题讨论】：

标签： javascript html css

【解决方案1】：

您需要在此处使用 javascript 才能订阅 window.onscroll 事件。

window.onscroll = function(){
    if(window.pageYOffset > 100/*px*/)
        $('.nav').addClass('fixed_bar');
    else
        $('.nav').removeClass('fixed_bar');
}

.fixed_bar 的 css 将是这样的：

.fixed_bar{
    position:fixed;
    top:0;
    z-index:10000;
}
.fixed_bar .logo{
    display:none;
}

此外，您还必须考虑固定导航将释放的空间，并将padding 或margin 添加到下方元素；

【讨论】：

你的语法正确吗？它最初对我不起作用。然后我回去调整到这个 window.onscroll = function(){ if(window.pageYOffset > 210/*px*/) { $('.bottom_header').addClass('fixed_bar'); $('.top_header').css('visibility:hidden;'); } else /*if(window.pageYOffset
不过还是谢谢，我之前不知道 window.pageYOffset 位:)
是的，语法是正确的，但我在示例中使用的类不是实际的，仅作为示例给出。您调整后的代码看起来不错。 /*px*/ 注释不是必需的，我添加它只是为了视觉透明。
是的，我知道。嗯，奇怪的是，它只适用于 if 和 else 之后的额外花括号。