要素を配置するために同等のコードを使用しています。
$(window).scroll(function(){
my_element.css("top",$(window).scrollTop() + 50)
});
問題は、スクロール中に要素が静止していないことです。onscroll
イベントがスクロールほど速く呼び出されていないかのように、前後に小刻みに動きます。不思議なことに、うまくいくこともあります。
要素を配置するために同等のコードを使用しています。
$(window).scroll(function(){
my_element.css("top",$(window).scrollTop() + 50)
});
問題は、スクロール中に要素が静止していないことです。onscroll
イベントがスクロールほど速く呼び出されていないかのように、前後に小刻みに動きます。不思議なことに、うまくいくこともあります。
position: fixed
スクロールごとに上部を調整するのではなく、CSS で使用することをお勧めします。これにより、スクロールの速さに関係なく、見出しは 1 つの位置で安定します。
すなわち
<div style="font-family: oswald; color: white; position: fixed; top: 50px; ...">...</div>
そして、スクロール イベント ハンドラを完全にチャックします。
または、より適切にクラスを使用します。<div class="heading">...</div>
そしてあなたのCSSで:
.heading {
font-family: oswald;
...
position: fixed;
top: 50px;
}
これは、スクロールバーボタンをドラッグしてスクロールすると、その速度に応じてスクロールイベントが複数回呼び出され、その間、スクロールイベントで指定した関数が呼び出され、計算されるためです。実行されます (完了するまで数秒かかる場合があります)。
回避策として、CSS position: fixed プロパティを使用できます。代わりに自分のやり方でやらなければならない場合、考えられる回避策は、おそらく少し遅れてこれを行うことでしょうか?