javascript - 通过添加类使部分保持在顶部

Question

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

我试图让最终结果看起来像一堆出现并停留在窗口顶部的页面

到目前为止，这是我的代码:-

$(document).ready(function(){
      var stickyTopSection = $('.home, .about, .gallery, .contact').offset().top;
    var stickyTop = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyTopSection) {
               $(this).addClass('sticky');
           } else {
               $(this).removeClass('sticky');
           }
       };

       stickyTop();

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

.home, .about, .gallery, .contact{
    height: 100vh;
    width: 100%;
}

.sticky{
    position: fixed;
    top: 0;
    left: 0;
}

.home{
    z-index: 1;
    background-color: #fff;
}

.about{
    z-index: 2;
    background-color: #eee;
}

.gallery{
    z-index: 3;
    background-color: #ddd;
}

.contact{
    z-index: 4;
    background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<header id="home" class="home">
                <h1>Welcome</h1>
            </header>

            <section id="about" class="about">
                <h2>About</h2>
            </section>

            <section id="gallery" class="gallery">
                <h2>Gallery</h2>
            </section>

            <section id="contact" class="contact">
                <h2>Contact</h2>
            </section>

Answer 1

您需要单独检查每个元素，而您所拥有的不会那样做。试试这个...

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()。