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

Question

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

示例：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"});
        }
    });