真ん中に隠されているスティッキーメニューのエラー
HéctorManuelMartínezDurán
私が持っている<header>、以下の画像のように順番に、2つのdivを含んでいること：
上半分のdivAと下半分のdivBです。私がやりたいのはスティッキーメニューです。下のdivの上部（赤）がゼロの場合、ヘッダー全体の位置が固定されます。 、ブラウザウィンドウで上部のdiv（青）を非表示にします。つまり：
これは私のコードです：
$(document).ready(function(){
let smenu = $('.divB');
stickyMenu(smenu);
function stickyMenu(menu){
$(window).on('scroll', function(){
if($(this).scrollTop() > menu.offset().top) menu.addClass('menu-fixed');
else menu.removeClass('menu-fixed');
});
}
}); body {
height: 8000px;
}
header{
background-color: transparent;
width: 95%;
margin: auto;
overflow: hidden;
transform: translateY(20px);
}
header .divA{
width: 100%;
background-color: #FFF;
z-index: 1;
overflow: hidden;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
height: 40px;
width: 100%;
background-color: red;
}
header .divB{
width: 100%;
background-color: #FFF;
z-index: 1;
overflow: hidden;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
height: 40px;
width: 100%;
background-color: green;
}
/*This class is to "stick" the menu on the top*/
.menu-fixed{
position: fixed;
z-index: 999;
width: 100%;
top: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="divA">
divA
</div>
<div class="divB">
divB
</div>
</header>問題は、スクロールを実行すると、ヘッダー全体がウィンドウを離れ（上向き）、下にスクロールするまでそこに留まるということです。
カリマ
あなたはあなたのcssとjavascriptに多くの問題を抱えています。最初にCSSでposition: fixed、transformプロパティを持つ内部要素を使用すると、「修正された」動作がなくなります。Stackoverflowでこの回答を確認してください
JSでは、すべてのスクロールイベントでオフセットを評価します。これにより、divBの「menu-fixed」に適用されているクラスがoffset（）。topを変更し、scrollイベントが毎回新しいトップオフセットを読み取るため、混乱が生じます。したがって、以下のコードで行ったように、上部オフセットをスクロールイベントから除外します。これにより、望ましくない影響を引き起こすすべてのイベントを更新するのではなく、元のトップオフセットへの参照が保持されます。
$(document).ready(function() {
let smenu = $('.divB');
stickyMenu(smenu);
function stickyMenu(menu) {
// Keep offset value out of scroll event
var top = menu.offset().top;
$(window).on('scroll', function() {
var hasMoved = $(this).scrollTop() > top;
(hasMoved == true) ? menu.addClass('menu-fixed'): menu.removeClass('menu-fixed');
});
}
});body {
height: 8000px;
}
header {
background-color: transparent;
width: 95%;
margin: auto;
/* Transform will act as a containing block for fixed position elemenets
transform: translateY(20px);*/
position: relative;
top: 20px;
overflow: hidden;
}
header .divA {
width: 100%;
background-color: #FFF;
z-index: 1;
overflow: hidden;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
height: 40px;
width: 100%;
background-color: red;
}
header .divB {
width: 100%;
background-color: #FFF;
z-index: 1;
overflow: hidden;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
height: 40px;
width: 100%;
background-color: green;
}
/*This class is to "stick" the menu on the top*/
.menu-fixed {
position: fixed;
z-index: 999;
width: 100%;
top: 0;
left: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="divA">
divA
</div>
<div class="divB">
divB
</div>
</header>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
VSコミュニティ2017のVisualStudioインストーラーを開いているときにエラーメッセージが表示されます
- 2
指定していないのに「統合セキュリティは無効な属性エラーです」というメッセージが表示される
- 3
要素からテキストを抽出しているときにこのエラーが発生します。メッセージ：古い要素参照：要素はページドキュメントに添付されていません
- 4
ブートストラップの問題、ドロップダウンメニューが別の要素の後ろに隠れている
- 5
'ongoingStatus'がディレクティブ入力の場合、ディレクティブが現在のモジュールによってインポートされていることを確認してください。ユニットテストエラー
- 6
他のブラウザで動作するため、上部に貼り付いていないChromeのスティッキーメニューの問題
- 7
画像に隠されたテキストを回復する際のエラー
- 8
Androidの点線の下線がテキストビューの真ん中に留まっている
- 9
ホバーのコンテキストメニューがアタッチされている場合、タブクリックは機能しません
- 10
navitemの真ん中にある中央のメガメニュー
- 11
メニューはdiv内に隠されています
- 12
ソフト入力キーボードがエディットテキストに隠れていない
- 13
エラーがキャッチされているかどうかをテストできません。参照されていないパラメータ（例： 'b'）を導入したときにエラーがスローされるようにしたい
- 14
Flutter-ディスクフルエラー-xcdeviceによって保存されているドキュメント
- 15
マーカーにリーフレットのコンテキストメニューが表示されない
- 16
Androidのポップアップメニューで新しいアクティビティを開始しているときにアプリにエラーが表示される
- 17
メインコンテンツを隠すスティッキーフッター（固定されていません）
- 18
クリックするとアプリがクラッシュし、次のメッセージが表示されます： 'このクラスは、キーpostReplyButtonのキー値コーディングに準拠していません。'
- 19
総計がテーブルに表示されていないときに、コンテキストメニューフィルターを使用してExcelピボットテーブルフィールドの最後の項目をフィルターで除外する方法はありますか？
- 20
Pentahoコミュニティダッシュボード：ハードコードされたパラメーターによって制御される複数のグラフの1つのデータソース
- 21
フェッチ中にエンティティのマップされていないパラメータの値を設定する方法
- 22
fortifyScanパイプラインステージのfortifyBasicAuthIdパラメーターの値の下に何が隠されていると予想されますか？
- 23
Laravelリソースルーティング-更新により「メソッドが許可されていません」エラーがスローされます
- 24
AwesomeWMのスティッキーmodkeyとしてのメニューキー
- 25
アニメーションが適用されるクラスで既に宣言されている場合、CSSアニメーションの `0％`キーフレームからプロパティを削除しても安全ですか？
- 26
パネルの後ろに隠れているドロップダウンメニュー
- 27
Windows7のタスクバーに固定されているアイコンのコンテキストメニューにアイテムを追加する
- 28
JFrog Artifactoryエラー：マニフェストv2スキーマ1のDockerイメージをこのリポジトリにプッシュすることはブロックされています
- 29
Obeo UML デザイナー 7.1 を使用している場合、アクティビティ エクスプローラー メニューに移動しても eclipse に表示されない
コメントを追加