Javascript 通过添加类使节粘在顶部

我试图创建一个页面，当每个部分到达窗口顶部时，它将向元素添加一个粘性类，使其固定在页面顶部

我试图使最终结果看起来像一堆页面，出现在窗口的顶部

这是我目前的代码：-

$（文档）.ready（函数（）{
var stickyTopSection=$（'.home、.about、.gallery、.contact'）.offset（）.top；
var stickyTop=函数（）{
var scrollTop=$（窗口）.scrollTop（）；
如果（scrollTop>stickyTopSection）{
$（this.addClass（'sticky'）；
}否则{
$（this.removeClass（'sticky'）；
}
};
粘滞顶部（）；
$（窗口）。滚动（函数（）{
粘滞顶部（）；
});
});
.home、.about、.gallery、.contact{
高度：100vh；
宽度：100%；
}
.粘的{
位置：固定；
排名：0；
左：0；
}
.家{
z指数：1；
背景色：#fff；
}
.关于{
z指数：2；
背景色：#eee；
}
.画廊{
z指数：3；
背景色：#ddd；
}
.联系方式{
z指数：4；
背景色：#ccc；
}

欢迎
关于
画廊
接触
您需要单独检查每个元素，而您所拥有的不会这样做。试试这个

var stickyTopSections = $('.home, .about, .gallery, .contact');

var stickyTop = function() {
    var scrollTop = $(window).scrollTop();

    stickyTopSections.each(function() {
        var $this = $(this);
        if (scrollTop > $this.offset().top) {
            $this.addClass('sticky');
        }
        else {
            $this.removeClass('sticky');
        }
    });
};

stickyTop();

$(window).scroll(function() {
    stickyTop();
});

stickyTopSections
是元素的集合，因此每个元素都必须单独解析，因此使用了
。each（）
考虑使用，它就是为了解决这个问题而设计的。对它的支持是，但如果还不够，您可以使用。
我已经尝试了另一个jQuery，这是您需要的吗


函数IsElementViewPort（el）{
//为使用jQuery的用户提供特别奖励
if（jQuery的类型==“函数”&&el实例jQuery）{
el=el[0]；
}
var rect=el.getBoundingClientRect（）；
返回(
rect.top>=0&&
rect.left>=0&&
当我使用'position:sticky'时，我的inspect元素表示它是无效属性value@Jason您可能使用不支持此功能的浏览器（您可以使用我提供的caniuse链接进行检查），在这种情况下，您可以使用polyfill。