滚动过去页面上的某些点时如何淡入/淡出 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();
}
});

小提琴：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 循环中的条件的东西时只需实现一件事