スクロール中にスティッキーのnavbarが動作しない

Question

サブナビのためのスティッキーなナビゲーションバーを作成しました。これは、ユーザーがスクロールしたときに画面の上部に固執する必要があります。したがって、私はいくつかのjavascriptを試しました。トップに達すると、位置が「固定」に変わります。 Navbarがフローから抜け出されたときにコンテンツのギャップを避けるため、Navbarと同じ高さを持つプレースホルダも追加しました。

デスクトップ上では実際に動作し、どのように表示されるべきかを示します。しかし、私はモバイルビューで "タッチ"問題を持っています。モバイルビューを下にスクロールすると、cssクラスが変更されている視点をスクロールするときにナビゲーションバーが表示されません。その視点の後にスクロールを止めると表示されます。それが表示されたら、私は通常上下にスクロールすることができます、そして、この手順を繰り返すと、この問題が再び起こります。ここでは、navbarがcssクラスを変更する必要があります。だから、CSSクラスの変更に問題がある可能性があり、問題はjavascriptスニペットにある可能性があります。誰かがこれに対する解決策を知っていますか？私はデスクトップビューのような同じ動作をしたいので、navbarは常に表示され、スクロールの流れにあっても画面の一番上に固定されています。

JS：

var menu = document.querySelector('#irp-localnav'); 
var menuPosition = menu.getBoundingClientRect(); 
var placeholder = document.createElement('div'); 
placeholder.style.width = menuPosition.width + 'px'; 
placeholder.style.height = menuPosition.height + 'px'; 
var isAdded = false; 

window.addEventListener('scroll', function() { 
if (window.pageYOffset >= menuPosition.top && !isAdded) { 
    menu.classList.add('sticky'); 
    menu.parentNode.insertBefore(placeholder, menu); 
    isAdded = true; 
} else if (window.pageYOffset < menuPosition.top && isAdded) { 
    menu.classList.remove('sticky'); 
    menu.parentNode.removeChild(placeholder); 
    isAdded = false; 
} 
}); 

あなたがHTML/CSSのマークアップでエラーを推測する場合は、ちょうど私に知らせて、私は、このマークアップ

種類よろしく

を掲載することにより、再びあなたと連絡を取る

Answer 1

私はハックすることができました。同様の問題に直面しているユーザーの場合：

モバイルブラウザは、イベントが進行中の間にスクロールイベントでは起動しません。あなたがスクロールを止めたときにイベントが停止したときに起動します。 translate3d（0px、0px、0px）を使用するとこれを解決できます。それについて続きを読むには、このスレッドを参照してください：

iOS 9 Safari: changing an element to fixed position while scrolling won't paint until scroll stops

種類よろしく！