Question

我目前正在设计一个新网站，并且布局，宽度和高度都是100％。

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

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

当我向下滚动时，是否有人使用正确的代码将我的标题放在屏幕顶部。

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

我当前的jquery代码是：

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

然而，这并不能解决问题。

Answer 1

对于你的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）。

Answer 2

这有什么帮助吗？该页面中的JQuery Position:Fixed 'NAVBAR' by scrolling the page也有一个演示，寻找明确的答案。

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

滚动上的粘滞头

2 个答案: