尝试在window上设置offsetTop.滚动，然后根据被触摸的幻灯片遍历DOM

trying to get offsetTop on window.scroll and then traverse the DOM according to the touched slide

本文关键字：触摸 DOM 遍历 幻灯片 然后 window 设置 滚动 offsetTop      更新时间：2023-09-26

我正在创建一个页面网站，然后试图在窗口上获得offsetTop。滚动，我想通过它来遍历DOM根据幻灯片。

a lot of tries..现在觉得自己很蠢…

如果有人能帮忙，我将不胜感激。由于

这里是代码和小提琴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');
            }


    });
http://jsfiddle.net/A8Hmr/9/

你的逻辑是正确的，这只是一个错误的假设。

我将展示代码并解释:

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)代码中的问题是if。因为它们都是if(而不是if/else if)语句，所以所有主题都被检查是否为真。也就是说，如果第一个为真，下一个就不为真，它会进入else语句，自动覆盖if为真。

所以你必须让它们为if/else if因为一旦y > a变为真值它就会一直为真(直到它变为y < a)你必须有一个附加条件如果y < b意味着如果y小于下一张幻灯片。当然，你可以只使用if/else，但如果只有一个是正确的，那么检查5件事有什么意义呢?性能应该是每一个js代码的主要内容。;)

版本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]);
        }
    });
})();

演示

这里有什么变化?

1)我把整个东西包装在一个自我调用的匿名函数中(因为拥有全局变量不是一个好的做法)。

2)我们在滚动事件之外创建了一个变量来保存h1，这样我们就不必在每个滚动事件上都进入dom。

3)我们创建了一个数组来保存将要改变的文本。(并更新了文本滚动条中的值)

4)我们改变了if语句中的if条件，以检查文本是否已经相同，因此我们不必再次更改它。现在它只会触发一次而不是每次滚动都触发。

5)我们将else改为else if，因为一旦文本相同，它将进入并跳转到else

这应该会大大提高性能。

相关文章：