jqueryの固定メニューとデタッチメニューの作成方法

Question

おはようございます、みんな、

私はメニューを作成していて、特定のやり方で動作させたいと思います。私は、下にスクロールすると

は、「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; 
} 

Answer 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'の高さで分けてください。

Answer 2

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

<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/