17

ユーザーが 100px 下にスクロールした後、要素の可視性を変更したいと考えています。

私はすでにいくつかのコードを持っています、

var fixed = false;
$(document).scroll(function() {
    if( $(this).scrollTop() >= 100 ) {
        if( !fixed ) {
            fixed = true;
            $('#logo-scroll').css({position:'fixed', display:'visible !important'});
        }
    } else {
        if( fixed ) {
            fixed = false;
            $('#logo-scroll').css({display:'none'});
        }
    }
});​

JSFiddle。

コードには 2 つの問題があります。

  1. デフォルトでは非表示になっているわけではありません。非表示になるようにしたいのです。

  2. ユーザーが上にスクロールしても、非表示に戻ることはありません。

詳しくは、

このヘッダーのようなものを作りたいのですが、ご覧のとおり、小さなロゴの半分と大きなロゴの一部が見える特定のポイントがあります。ヘッダーが小さいため、techcrunch にはあまり影響しませんが、私のサイトでは影響します。私はすべてを作りました.私はただそれを開始する必要があり、display:none100pxの後に見えるようになります.

4

2 に答える 2

23

用途:display:block;とdisplay:none;

jsFiddle デモ

これを CSS に追加します。

#logo-scroll{ display:none; position:fixed; }

jQ:

var $logo = $('#logo-scroll');
$(document).scroll(function() {
    $logo.css({display: $(this).scrollTop()>100 ? "block":"none"});
});

ところで: TC ページでは、それは単にCSSz-index を使った遊びです。これ以上何もない。すべての要素はページの読み込み時に表示されます。大きなロゴの下に z-index の下の要素が表示されるのはスクロールだけです。

プレーンな Javascriptでは、次のようになります。

var win = window,
    docEl = document.documentElement,
    $logo = document.getElementById('logo-scroll');

win.onscroll = function(){
   var sTop = (this.pageYOffset || docEl.scrollTop)  - (docEl.clientTop || 0);
   $logo.style.display =  sTop > 100 ? "block":"none" ;
};
于 2012-07-11T14:23:27.677 に答える