javascript - 滚动经过页面上的某些点时如何淡入/淡出 div？

Question

当用户滚动到页面中的某个点时，您如何淡出/淡出彼此重叠的 div？我有一个固定按钮，当用户到达页面上的 6 个不同点时，我想更改它。换句话说，我可以从页面不同位置的同一个按钮链接到 6 个不同的东西，比如从顶部开始 1000 像素，然后是 2000 像素等等。

每个按钮中都有不同的单词，所以我只想在滚动时达到正确的像素数时，每个按钮都在下一个按钮之后淡入。

html

<div class="buttonOne">button one</div> <div class="buttonTwo">button two</div> <div class="buttonThree">button three</div>

CSS

.buttonOne, .buttonTwo, .buttonThree {
position: fixed;
margin-top: 3em;
}

所有位置固定且彼此重叠。每一个都应该以 100px、200px、300px 等淡入吗？

Answer 1

使用jquery:

$(window).scroll(function(){
if($(window).scrollTop() === 10){
   $('.element').fadeOut();
}
});

fiddle :http://jsfiddle.net/Hive7/vV7Wd/2/

添加更多用途:

if ($(window).scrollTop() >= "number of pixels") {
        if ($('"button plus number"').css('display') === 'none') {
            $('"button plus number"').fadeIn('slow');
            $('"button plus number"').prev().fadeOut();
            $('"button plus number"').next().fadeOut();
        }
    }

双引号内的元素由你设置

示例(数字 4):

if ($(window).scrollTop() >= 400) {
            if ($('button4').css('display') === 'none') {
                $('button4').fadeIn('slow');
                $('button4').prev().fadeOut();
                $('button4').next().fadeOut();
            }
        }

或者使用 for 循环:

$(window).scroll(function () {
    for (i = 0; i <= 20; i++) {
        if ($(window).scrollTop() >= (i * 100)) {
            if ($(window).scrollTop() <= ((i * 100) + 100)) {
                $('.button' + i).fadeIn('slow');
                $('.button' + i).prev().fadeOut();
                $('.button' + i).next().fadeOut();
            }
        }
    }
});

for 循环更好，因为它意味着每次添加一个条件时只需执行一件事，这是 for 循环中的条件