10

jQueryでスティッキーヘッダーを作成する際に特定の問題があります。Web で一般的に使用されているスニペットを試してみましたが、どこでも同じバグがあることに気付きました。

特定のドキュメントの高さ (sticky-effect の呼び出しよりも少し多くなるまでスクロール可能) で、スティッキー ヘッダーは と の間position: fixedでジャンプしposition: staticます。

HTML:

<header>
  <div id="not-sticky"></div>
  <div id="sticky"></div>
</header>
<div id="content"> ...


jQuery:

var $sticky = $("#sticky");
var offset = $sticky.offset();
var stickyTop = offset.top;
var windowTop = $(window).scrollTop();
$(window).scroll(function() {
  windowTop = $(window).scrollTop();
  if (windowTop > stickyTop) {
    $sticky.css({
      position: 'fixed',
      top: 0
    });
  }
  else {
    $sticky.css({
      position: '',
      top: ''
    });
  }
});


CSS:

header {
  width: 100%;
}

#not-sticky {
  padding: 50px 0;
  width: 100%;
}

#sticky {
  padding: 24px 0;
  position: relative;
  width: 100%;
  z-index: 25;
}


ドキュメントの高さを一定に保つために#not-sticky、と同じ高さのマージンボトムも試してみましたが、同じビクビクしたりスティッキーな効果が発生しました。#sticky

それを修正するアイデアはありますか？

4

1 に答える 1

13

スクロールが何度も発生し、要素を設定しようとすると、style常に & 必然的にジャンプが発生します (ほとんど目立たなくてもギザギザです)。

私が見つけた最良の方法は、

  1. 要素の クローンを作成し、
  2. そのクローンを作るfixed
  3. visibilityクローンのスタイルで遊んでください。

純粋な JS:

;(function(){ /* STICKY */

  var sticky  = document.getElementById("sticky"),
      sticky2 = sticky.cloneNode(true);

  sticky2.style.position = "fixed";
  document.body.appendChild(sticky2);

  function stickIt(){
    sticky2.style.visibility = sticky.getBoundingClientRect().top<0 ? "visible" : "hidden";
  }

  stickIt();
  window.addEventListener("scroll", stickIt, false );
}());
#sticky{
  height:100px;
  background:#ada;
  height:50px;
  position:relative;
  /* needed for clone: */
  top:0; 
  width:100%;
}


/* Just for this demo: */
*{margin:0;padding:0;}
#content{height:2000px; border:3px dashed #444;}
h1{padding:40px; background:#888;}
<h1>Logo</h1>
<div id="sticky">Sticky header</div>
<div id="content">Lorem ipsum...<br>bla bla</div>

したがって、「ヘッダー」修正が表示されている場合、それは実際には修正されたクローンが一番上に表示されています。

于 2013-05-13T01:54:02.300 に答える