javascript - 「折りたたみ」位置：jqueryを使用した固定要素

Question

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

要素の上部をページの上部に保持する多くの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');
    }

  });

});