Question

我希望当我向下滚动时，如果我的第二个框（text1）和视口顶部之间的距离是200，则此div应该具有固定位置，并且当第三个框之间的距离（ text2）并且视口的顶部为400，text2变为固定，text1再次相对。当text1和视口顶部之间的距离达到100时，text2应该再次相对且可滚动。现在，当偏移量为200时，text1 div获得固定位置，但当偏移量为400时，text2不会固定。

这是我到目前为止所做的一个小提琴：https://jsfiddle.net/cwwy9aq3/2/

<div class="test">
    <div class="background-fixed"></div>
    <div class="text"></div>
    <div id="text1" class="text text1"></div>
    <div id="text2" class="text text2"></div>
</div>

.test {
    position: relative;
    min-height: 3000px;
}

.background-fixed {
    background-image: url(https://pixabay.com/static/uploads/photo/2015/10/17/20/36/christmas-993304_960_720.jpg);
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    position: absolute;
    background-size: cover;
}

.text {
    width: 100px;
    height: 100px;
    background-color: white;
    position: relative;
    top: 300px;
    left: 300px;
}

.text1 {
    top: 1100px;
    width: 400px;
    height: 225px;
    z-index: 2;
}

.text2 {
    left: 650px;
    top: 1500px;
    width: 419px;
    height: 174px;
    background-color: red;
    z-index: 3;
}

$('#text1').waypoint(function(direction) {
    if (direction === "down") {
        $(this).css({
            'position': 'fixed',
            'top': '200px'
        });
        $('#text2').css({
            'top': '3000px'
        });
    }
}, {
    offset: '200'
}).waypoint(function(direction) {
    if (direction === "down") {
        $('#text2').css({
            'position': 'relative',
            'top': '1500px'
        });
    }
}, {
    offset: '100'
});

$('#text2').waypoint(function(direction) {
    if (direction === "down") {
        $(this).css({
            'position': 'fixed',
            'top': '400px'
        });
        $('#text1').css({
            'position': 'relative',
            'top': '1100px'
        });
    }
}, {
    offset: '400'
});

两个选择器的两个航路点

0 个答案: