web-dev-qa-db-ja.com

ページスクロールでdivをフェードイン/フェードアウトするにはどうすればよいですか？

Jsfiddleは次のとおりです。 http://jsfiddle.net/NKgG9/

基本的に、これらのピンクのボックスを通常どおりページの読み込み時に表示したいのですが、ユーザーがページを下にスクロールするとすぐにフェードアウトして消えるようにします。ユーザーが自分の位置またはブラウザウィンドウの上部にスクロールして戻ると、ピンクのボックスが再びフェードインします。私はJSには役に立たないので、これを行う方法についていくつかの助けを借りてください。

すべての助けに感謝します。

jqueryscrollfadeshow-hide
9
egr103

非常に簡単な例： http://jsfiddle.net/a4FM9/2/

var divs = $('.social, .title');
$(window).scroll(function(){
   if($(window).scrollTop() <10 ){
         divs.stop(true,true).fadeIn("fast");
   } else {
         divs.stop(true,true).fadeOut("fast");
   }
});​
13
Cheery

このような？ http://jsfiddle.net/NKgG9/6/

$(function(){ 
    var targets = $(".title, .social");
    if($(window).scrollTop() > 10){
      targets.hide();
    }
    $(window).scroll(function(){
        var pos = $(window).scrollTop();
        if(pos > 10){
            targets.stop(true, true).fadeOut("fast" );
        } else {
            targets.stop(true, true).fadeIn("fast");
        }
    });

});

基本的な考え方：スクロールイベントをサブスクライブします。スクロール位置が特定のポイントを超えて移動した場合は、フェードアウトを開始し、ユーザーが上にスクロールした場合も同様にフェードインします。重要な詳細：すでにフェードイン/フェードアウトしている場合は追跡し（変数を表示）、進行中のフェードを停止します。新しいフェードを開始します。

4
Andre Loker

ありがとう-これは本当に私を助けてくれました。

私はもともと " Scroll for More "のような解決策が欲しかったのですが、なんとかして http://jsfiddle.net/a4FM9/12/ -多分これは便利です誰のために。

0
Leander