0
"menu-bar"と呼ばれるdivクラスがあるWebサイトを構築しています。これは、スクリーンの下の数百ピクセルを何らかの背景色で横切っているバーです。 HTML、CSS、JQueryを3つの別々のファイルに持っています。Jqueryメソッドを使用してdivのCSS位置を絶対値から固定値に変更します
ユーザーがページを下にスクロールし、「メニューバー」の上端が画面の上端に達すると、ユーザーが元の位置まで完全にスクロールするまでスクロールします。今、「メニューバー」は絶対CSS位置に設定されています。メニューバーの位置を "固定"に変更するには、JQueryメソッドの.removeClass（）と.addClass（）を使うだけでよいと思いました。以下は私のコードです。
関連HTML：
<html>
<body>
<div id="page-container">
<div id="header">
<div class="menu-bar"></div>
</div>
</div>
</body>
</html>
関連するCSS：
.menu-bar
{
position: absolute;
width: 100%;
height: 50px;
left: 0;
top: 225px;
background-color: #11342D;
z-index: -1;
}
.menu-fixed {
position: fixed;
width: 100%;
height: 50px;
left: 0;
top: 0;
background-color: #11342D;
z-index: -1;
}
のjQuery：
$(document).ready(function(){
var offset = $('menu-bar').offset();
$(window).scroll(function){
var scroll = $(window).scrollTop();
if offset.top < scroll) $('menu-bar').removeClass('menu-bar').addClass('menu-fixed');
else $('menu-bar').removeClass('menu-fixed').addClass('menu-bar');
});
});
コードが動作していないと私は日のためにトラブルシューティングをしてきました。私は間違って何をしていますか？ここには、私が探している行動の種類とほぼ同じ種類のサイトへのリンクがあります：[https://monocle.com/][1]
ありがとう。
更新：以下は、この動作を複製する必要がある誰のための作業用jQueryコードです。
$(document).ready(function(){
var offset = $('.menu-bar').offset();
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (offset.top < scroll)
{
$('.menu-bar').removeClass('menu-bar').addClass('menu-fixed');
}
else
{
$('.menu-fixed').removeClass('menu-fixed').addClass('menu-bar');
}
});
});
を行うことができますありがとうございました。私はHTMLとCSSを知っていますが、昨日jquery.comのAPIドキュメントからjqueryを学び始めました。最後のビットを書く2番目の方法を私に説明してもらえますか？あなたはIf Elseステートメントの代わりに追加できると言っていますか？ "、"と仮定するとWHENがTRUEと評価され、 "！"はWHENがFALSEと評価されるということと同じですか？ – leschandrew