0

ユーザーがページの特定のポイントまでスクロールしたときに、重なり合っている 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 などでフェードインする必要がありますか?

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 ループの条件であるものを追加するたびに 1 つのことを実装するだけでよいことを意味するため、より優れています。

于 2013-07-18T11:34:47.670 に答える