Question

我正在尝试使用jquery waypoints为每个部分添加一个类。关键是当该部分点击视点的顶部时，要添加类“固定的”，然后再次删除该类以用于上一部分。

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

效果看起来就像一张反向的整页幕布。

在这里小提琴：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/

使用航点滚动添加/删除课程

1 个答案: