jQuery – 如果div位于窗口顶部，添加类/样式？ （粘性横幅）

所以我做了一个粘性的横幅

示例： http ： //jsfiddle.net/zu60j5rr/

在示例中，它工作正常。 但是我想要使用它的网站有一个顶级导航，在不同的浏览器上不能完全相同。 所以我不能依靠“顶级”来应对所有浏览器

所以我想知道的是。 有没有办法我可以添加一个类似的声明，如果div击中窗口的顶部 – 添加样式来修复位置？ 然后如果它向后滚动，删除样式？

这是我目前所拥有的，如同摆弄：

$(document).on( 'scroll', function(){ if ($(window).scrollTop() > 100) { $('#stickyBanner').css({position: "fixed", top: "0px"}); } else { $('#stickyBanner').css({position: "relative", top: "0px"}); } }); 

谢谢！！

Answer 1

您可以稍微更改脚本，以便检查粘性导航的偏移顶部值是否大于或等于窗口scrollTop的值。 基本上如果它们相同/相等，则元素位于窗口顶部:)

这里的例子http://jsfiddle.net/zu60j5rr/1/

 var stickyTop = $('#stickyBanner').offset().top; $(window).on( 'scroll', function(){ if ($(window).scrollTop() >= stickyTop) { $('#stickyBanner').css({position: "fixed", top: "0px"}); } else { $('#stickyBanner').css({position: "relative", top: "0px"}); } });