アニメーション化されたナビゲーションバーを一度スクロールして特定のポイントをスクロールする

Question

ユーザーが特定の部分を過ぎてスクロールすると、アニメーション化されたナビゲーションバーをページの上部に貼り付けようとしています。 （ここには多くの例がありますが、私は仕事をすることができませんでした）。

私は、既存のonscrollアニメーションと矛盾することなく、そしてそのnavbar自身のdivにページ全体を入れ子にすることなく、ブートストラップを使わずにjavascriptを追加したいと思います。

JavaScriptを使用しているのですか、CSSを使用する方法がありますか？

https://jsfiddle.net/p9xfy79x/2/

window.onscroll = function() { 
    myFunction() 
}; 
function myFunction() { 
    var navbar = document.getElementById("myNavbar"); 
    if (document.body.scrollTop > 85 || document.documentElement.scrollTop > 100) { 
    navbar.className = " bar" + " card" + " animate-top" + " white"; 
    } else { 
    navbar.className = navbar.className.replace(" card animate-top white", ""); 
    } 
} 

Answer 1

あなたのCSSセレクタ.animate-topは、ここで問題の原因です。主な問題は、ナビゲーションの内部divを相対的なものに設定することです。ただ、次のようにあなたのCSSセレクタを変更し、それはあなたの問題を解決する必要があります

.animate-top { 
    position: fixed; 
    top:0; 
    animation: animatetop 0.4s 
} 

は、ここでの例作業：https://jsfiddle.net/7ze2fukk/

は、この情報がお役に立てば幸いです。乾杯。