0

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

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

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 等处淡入？

4

1 回答 1

4

使用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 循环中的条件

于 2013-07-18T11:34:47.670 回答