おはようございます、みんな、jqueryの固定メニューとデタッチメニューの作成方法
私はメニューを作成していて、特定のやり方で動作させたいと思います。私は、下にスクロールすると
は、「TOP」セクションには、(これはすでに働いている)上に移動
私は「MY MENU」セクションでは、最初に隠され、「TOP」セクションでは、アップ消えたときにのみ表示されたいスクロールするとき。
私が達成しようとしているものの例はhttps://flipkart.comで見ることができますか? https://jsfiddle.net/gad123/j695to5b/1/(解決)
<div class="container">
<div class="row">
<div class="span">
<div class="wll">
<h3>TOP</h3>
</div>
</div>
</div>
</div>
<div id="nav-wrapper">
<div id="na">
<div id="nav" class="navbar">
<div class="navbar-inner">
<div class="container">
<div class="span12" style="background:#888;
padding:1em 0 1em 0;">
<span class="navbar-text">
My menu
</span>
</div>
</div>
div>
</div>
</div>
</div>
<div class="container">
<div class="span3">
<h2>some lorem ipsum for scrolling:</h2>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
amet.
<div id="detach"><b>test</b></div>
</div>
</div>
jqueryの:
$('#nav-wrapper').height($("#nav").height());
$('#nav').affix({
offset: $('#nav').position()
});
$('#nav').detached({
offset: $('#detach').position()
});
CSS:
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
h3{color:red;}
.top{
background:#999;
width: 100%
}
#nav.detached {
position:static;
top:0;
}
#nav > .navbar-inner {
border-left: 0;
border-right: 0;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-o-border-radius: 0;
}
h3{
color:orange
}
.wll{
padding:1em 0 1em 0;
background:#444;
}
これまでのところ、あなたが構築しようとしているものたちに語っていますが、あなたは、あなたの問題が何であるかを私たちに語っていません。 – ProEvilz
あなたはフィドルを見ていただけますか? 私の問題は、「私のメニュー」セクションを隠すことができず、「TOP」セクションが完全に消えてしまったときだけに表示することです。 – Gad
スティッキーはもっとシンプルになりますか? –