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