2017-12-08 12 views
1

おはようございます、みんな、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; 
} 
+0

これまでのところ、あなたが構築しようとしているものたちに語っていますが、あなたは、あなたの問題が何であるかを私たちに語っていません。 – ProEvilz

+0

あなたはフィドルを見ていただけますか? 私の問題は、「私のメニュー」セクションを隠すことができず、「TOP」セクションが完全に消えてしまったときだけに表示することです。 – Gad

+0

スティッキーはもっとシンプルになりますか? –

答えて

1
$('#nav-wrapper').height($("#nav").height()); 

if($(".top").height()> $(document).scrollTop()){ 
    $("#nav").css({"display": "none"}); 
} 

$(document).scroll(function(){ 
    if($(".top").height()< $(document).scrollTop()){ 
     $("#nav").css({"display": "block"}); 
    } 
    else{ 
     $("#nav").css({"display": "none"}); 
    } 
}); 

$('#nav').affix({ 
    offset: $('#nav').position() 
}); 

$('#nav').detached({ 
    offset: $('#detach').position() 
}); 

することができます(上のモバイルVUE)ここ

は作業フィドルですcom実際のスクロールの高さを '.top'の高さで分けてください。

+0

ありがとう!これはフィドルです:http://jsfiddle.net/gad123/7o30yeu3/3/ – Gad

1

これは簡単で簡単な方法です。私はあなたのフィドルでそれをテストしました。 は大丈夫そう、私はあなたのコードにいくつかの変更を行い、

<div id="menu"> 
<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> <!-- container --> 
    </div> <!-- navbar-inner --> 
</div> <!-- navbar --> 

以下のようにそれはあなたに以下を追加し、完全

ID =「メニュー」への変更idは=「NA」を働きましたCSS

#menu { 
position:fixed; 
top:0px; 
width:100%; 
background-color:#DDDDDD; 
color: #FFFFFF; 
z-index:9999; 
display: none; 

}

とにスクリプトを変更します

$(document).ready(function(){      
    $(window).scroll(function(){       
     if ($(this).scrollTop() > 0) { 
      $('#menu').fadeIn(500); 
     } else { 
      $('#menu').fadeOut(500); 
     } 
    }); 
}); 

フィドルへのリンク:https://jsfiddle.net/7wfryfmL/3/

+0

あなたはフィドルを共有してください – Gad

+0

@Gad私は編集し、フィドルを追加しました –

+0

ありがとう。 私はいくつかの変更を加えましたが、これはより良いものです。 https://jsfiddle.net/gad123/j695to5b/1/ – Gad