jQuery - 如果 div 位于窗口顶部，添加类/样式？ (粘性横幅)

Question

所以我制作了一个粘性横幅

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

在示例中它工作正常。但我想使用它的网站有一个顶部导航，在不同的浏览器中呈现的效果并不完全相同。所以我不能依赖“top”在所有浏览器上工作

所以我想知道的是。有什么方法可以添加类似这样的语句:如果 div 到达窗口顶部 - 添加样式来固定位置？然后如果向后滚动，删除样式？

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

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

谢谢!!

Answer 1

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

这里的例子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"});
        }
    });