滚动上的粘性标题答案

【问题标题】：Sticky Header on scroll滚动上的粘性标题
【发布时间】：2016-04-30 09:29:02
【问题描述】：

我目前正在设计一个新网站，并拥有 100% 响应式布局、宽度和高度。

我有一个距屏幕底部 0px 的标题。一旦滚动过去，我希望标题获得一类“粘性”，然后以固定格式将标题放在页面顶部。

目前我只能找到当您在页面上点击某个像素时导航位于顶部的 jquery 代码。但是我有一个基于百分比的网站，因此标题所在的像素在每个计算机屏幕上都会有所不同。

有没有人有正确的代码让我在向下滚动后将标题放在屏幕顶部。

我添加了一张图片来解释。谢谢。

我当前的jquery代码是：

$(window).scroll(function () {
    if ($(window).scrollTop() > $(window).height() ) {
        $('header').removeClass('sticky');
    } else {
        $('header').addClass('sticky');
    }
});

但是，这似乎行不通。

【问题讨论】：

你的 CSS 代码在哪里？

标签： jquery css nav sticky

【解决方案1】：

这有帮助吗？ JQuery Position:Fixed 'NAVBAR' by scrolling the page 在那个页面里也有一个演示，寻找标记的答案。

你也可以试试我很久以前写的这个插件Simple-Sticky-Top-Navbar。有一段时间我没有更新它，但是嘿，你总是可以按你喜欢的方式分叉和调整它:)

【讨论】：

【解决方案2】：

为你的 css 试试这个：

.sticky {
    position: fixed;
    top: 0px;
}

这将使标题保持在屏幕顶部。或者，您可以只提供标题 position: sticky; (https://developer.mozilla.org/en-US/docs/Web/CSS/position#Sticky_positioning)，但您的浏览器支持将非常有限 (http://caniuse.com/#feat=css-sticky)。

【讨论】：