滚动粘滞标题

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。这是一段时间我没有更新它，但嘿，你可以随时分叉，并按你喜欢的方式调整它:)