javascript - 使用航路点在滚动上添加/删除类

Question

我正在尝试使用 jquery 航路点向每个部分添加一个类。重点是要添加“固定”类，当该部分到达视点顶部时，然后再次为上一节删除该类。

我在每个部分之间有一个 push 元素，以确保固定 div 在视口(viewport)中的高度。

效果看起来像一个反向的整页窗帘。

在这里 fiddle :fiddle

标记

<section></section>
<div class="push"></div>
<section></section>
<div class="push"></div>
<section></section>
<div class="push"></div>
<section></section>

CSS

section {
height: 100vh;
z-index: 2;
}

.fixed {
position: fixed;
top:0;
width: 100%;
}

.push {
width: 100%;
height: 100vh;
position: relative;
z-index: 1;
}

Jquery

$('section').each(function(){
        var sectionElement = $(this);
        var inview = new Waypoint.Inview({
            element: sectionElement[0],
            entered: function(direction) {
                if (direction === 'down') {
                    $('section').removeClass('fixed');
                    sectionElement.addClass('fixed');
                    sectionElement.prev().hide();
                } else {
                    sectionElement.removeClass('fixed');
                    sectionElement.prev().addClass('fixed');

                }
            },
        });
    });

Answer 1

你可以这样做:

.push {
width: 100%;
height: 100vh;
position: fixed;
z-index: 1;
}

https://jsfiddle.net/ivinraj/vz3e94Lr/1/