Javascript 尝试在window.scroll上进行偏移，然后根据触摸的幻灯片遍历DOM

我正在创建一个页面站点，然后尝试在window.scroll上进行偏移，我希望通过它根据幻灯片遍历DOM

多次尝试。。我现在觉得自己很笨

如果有人能帮忙的话，我会非常感激的。 谢谢

以下是代码和fiddle URL：

$(window).scroll(function () {
        var y = $(window).scrollTop(),
            a = $('#first').offset().top - 200,
            b = $('#second').offset().top - 200,
            c = $('#third').offset().top - 200,
            d = $('#fourth').offset().top - 200;

            if (y > a) {
             $('h1').html('This is First Slide');
            }
            if (y > b) {
             $('h1').html('This is Second Slide');
            }
            if (y > c) {
             $('h1').html('This is Third Slide');
            }
            if (y > d) {
             $('h1').html('This is Third Slide');
            }
            else{
            $('h1').html('No heading');
            }




    });

---

你的逻辑是正确的，这只是国际单项体育联合会的失误

我将展示代码并解释：

var a = $('#first').offset().top - 200,
    b = $('#second').offset().top - 200,
    c = $('#third').offset().top - 200,
    d = $('#fourth').offset().top - 200;
$(window).scroll(function () {
    var y = $(window).scrollTop();  
    if (y > a && y < b) {
        $('h1').text('This is First Slide');
    }
    else if (y > b && y < c) {
        $('h1').text('This is Second Slide');
    }
    else if (y > c && y < d) {
        $('h1').text('This is Third Slide');
    }
    else if (y > d) {
        $('h1').text('This is Third Slide');
    }
    else{
        $('h1').text('No heading');
    }
});

这里有什么零钱

1） 我将整个过程包装在自调用匿名函数中（因为使用全局变量不是一个好的做法）

2） 我们在scroll事件之外创建了一个变量，它将保存

h1

，因此我们不必在每个scroll事件上都进入dom

3） 我们制作了一个数组，用于保存将更改的文本。（并更新了文本滚动中的值）

4） 我们更改了if语句中的

if

条件，以检查文本是否已经相同，因此不必再次更改。所以现在它只会发射一次，而不是每次我们滚动时都发射

5） 我们将

else

更改为

else if

，因为一旦文本相同，它就会跳转到else

---

这应该会大大提高性能。

你说得对。它有性能问题，表现不好。。你对实现这一目标有什么建议吗。。。感谢look版本2，它应该表现得更好。

(function(){
    var a = $('#first').offset().top - 200,
        b = $('#second').offset().top - 200,
        c = $('#third').offset().top - 200,
        d = $('#fourth').offset().top - 200,
        h1 = $('h1'),
        textChange = ['No heading','This is First Slide','This is Second Slide','This is Third Slide', 'This is Third Slide']
    $(window).scroll(function () {
        var y = $(window).scrollTop();  
        if (y > a && y < b && h1.text() != textChange[1]) {
            h1.text(textChange[1]);
          }
        else if (y > b && y < c && h1.text() != textChange[2]) {
            h1.text(textChange[2]);
        }
        else if (y > c && y < d && h1.text() != textChange[3]) {
            h1.text(textChange[3]);
        }
        else if (y > d && h1.text() != textChange[4]) {
            h1.text(textChange[4]);
        }
        else if(y <= a && h1.text() != textChange[0]){
            h1.text(textChange[0]);
        }
    });
})();