0
jQueryコードの部分が非常にシンプルなので、ページのナビゲーション要素にposition: fixedというクラスを適用するとナビゲーションがスッキーになり、彼らはページを下にスクロールします。CSSの位置が固定されていない - スティッキーナビゲーション
私はCommerceプラットフォームでこれを構築しています。問題は、position: fixedがナビゲーション要素に適用されたときにそのプロパティが正しく機能していないように見えることです。位置が "固定"になっているように見えますが、ヘッダ領域内に固定されているだけで、なぜこのようなことが起こるのかわかりません。あなた自身のためにこれを見たい場合は下記を参照してください：
http://ts564737-container.zoeysite.com/
あなたは少しスクロールした後、ナビゲーション要素は固定ではなく、正しくそれが必要としてなっていることがわかります。
以下の私のコードを参照してください：
CSS
.fixed {
top: 0 !important;
z-index: 100 !important;
position: fixed !important;
transition: all 0.3s;
background-color: #000000;
opacity: 0.9;
}
のJavaScript/jQueryの
<script>
var num = 40;
jQuery(window).bind('scroll', function() {
if (jQuery(window).scrollTop() > num) {
jQuery('.navigation').addClass('fixed');
} else {
jQuery('.navigation').removeClass('fixed');
}
});
</script>
誰もがここで間違っていると引き起こしているものについてどのような洞察を提供することができますが要素が正しく修正されないどんなアドバイスも大歓迎です、ありがとうございました。
あなたのコードは大丈夫だと思います。しかし、あなたが提供したリンクの下では、 '.navigation'クラスの要素を見つけることができません。これがjQueryのターゲットです。何か不足しているのですか？これはすでにあなたの問題を解決していますか？ –
私はあなたのナビゲーションクラスを見つけることができませんでした – Araz
https://developer.mozilla.org/en-US/docs/Web/CSS/positionに 'position：fixed'の説明を読みます - これは@gaussが正しい理由を説明します – Flyer53