Question

我有一个jquery函数，可以在滚动浏览该部分时使某个部分的标题固定，并在到达下一部分时恢复为静态元素。我想在多个部分（.first，.second，.third，...）上使用此效果，但是我只能通过为每个部分设置单独的功能来使其工作。< / p>

有没有办法概括这个功能，以便它可以在所有这些部分上工作？我尝试使用（this）来识别上下文，但不能让它用于滚动。

以下是我正在使用的功能：

var containerHeight = $('.container').height();

var firstTop = $('.first .label').offset();
var secondTop = $('.second .label').offset();
...

var firstBottom = firstTop.top + (containerHeight - 160);
var secondBottom = secondTop.top + (containerHeight - 160);
...

$(window).scroll(function(){
    if($(window).scrollTop() > firstTop.top && $(window).scrollTop() < firstBottom){
        $('.first .label').addClass('fixtop').removeClass('fixbottom');
    }
    else if($(window).scrollTop() >= firstBottom) {
        $('.first .label').removeClass('fixtop').addClass('fixbottom');
    }
    else {
        $('.first .label').removeClass('fixtop').removeClass('fixbottom');
    };


    if($(window).scrollTop() > secondTop.top && $(window).scrollTop() < secondBottom){
        $('.second .label').addClass('fixtop').removeClass('fixbottom');
    }
    else if($(window).scrollTop() >= secondBottom) {
        $('.second .label').removeClass('fixtop').addClass('fixbottom');
    }
    else {
        $('.second .label').removeClass('fixtop').removeClass('fixbottom');
    };

    ...
});

Answer 1

var tops = [firstTop, secondTop];
var bottoms = [firstBottom, secondBottom];


$(window).scroll(function(){
    for (var i = 0; i < tops.length; i++) {
        if($(window).scrollTop() > tops[i].top && $(window).scrollTop() < bottoms[i]){
            $('.first .label').addClass('fixtop').removeClass('fixbottom');
        }
        else if($(window).scrollTop() >= bottoms[i]) {
            $('.first .label').removeClass('fixtop').addClass('fixbottom');
        }
        else {
            $('.first .label').removeClass('fixtop').removeClass('fixbottom');
        };
    }
})

您所要做的就是将所有顶部添加到顶部阵列，并将底部添加到底部！

如何推广通过滚动在多个实例中使用的函数？

1 个答案: