"collapsing" position：jqueryを使用した固定要素

Question

ロゴが持つ効果をページの上部に固定されたthis pageに実装しようとしていますが、スクロールするとその一部のみが表示されます。要素全体ではありません。

私は、ページの上部に要素の上部を維持するたくさんのjqueryプラグインを見つけましたが、要素がどれだけ高く維持されるかをカスタマイズすることはできません。私のjavascriptは何も最初から何かをコーディングするのではありません。誰かが便利かもしれないプラグインに対する提案はありますか？

Answer 1

これにはプラグインは必要ありません。 CSSはロゴを固定したままにすることができ、ユーザがページをスクロールし始めると、JavaScriptの要素を使って表示を変更することができます。あなたのロゴはロゴのIDを持っていると仮定すると

、CSSは次のようになります。

#logo { 
    top: 0; 
    position: fixed; 
} 

あなたが、あなたがこのような何か行うことができますjQueryのを使用している表示されますので：

$(function() { 

    // gets a reference to the document based on which browser is being used 
    var oDoc = $.browser.msie === true ? window : document; 

    // event handler for when the user scrolls 
    $(oDoc).scroll(function() { 

    // if the user is at the top, display the whole image 
    if($(this).scrollTop() === 0) { 
     $('#logo').css('margin-top', 0); 

    // otherwise, pull the image up a single em (200 is arbitrary) 
    } else if($(this).scrollTop() > 200) { 
     $('#logo').css('margin-top', '-1em'); 
    } 

    }); 

});