如何在頁面頂部保留導航欄？

Question

我試圖讓我的導航欄留在頁面的像forbes.com

我知道上我可以做

nav 
{ 
    position: fixed; 
    top: 0; 
} 

但導航欄是不是在頁面頂部，它涉及標誌後... ...但是當你向下滾動，我想導航欄粘到屏幕頂部..

This is my site

Answer 1

使用位置絕對和頂部值設置爲數字你想要的像素他的導航欄是從瀏覽器的頂部。

Answer 2

你可以嘗試在JQuery的是這樣的：

HTML：

<div id="wrapper"> 

    <header> 
    <h1>Floater Navigation</h1> 
    </header> 

<nav> 
    <p>Navigation Content</p> 
    </nav> 

    <div id="content"> 
      <p>Lorem Ipsum.</p> 
    </div> 
</div> 

CSS：

#wrapper { 
width:940px; 
margin: 0 auto; 
} 

header { 
text-align:center; 
padding:70px 0; 
} 

nav { 
background: #000000; 
height: 60px; 
width: 960px; 
margin-left: -10px; 
line-height:50px; 
position: relative; 
} 

#content { 
background: #fff; 
height: 1500px; /* presetting the height */ 
box-shadow: 0 0 5px rgba(0,0,0,0.3); 
} 

.fixed { 
     position:fixed; 
} 

JQuery的：

$(document).ready(function() { 

    //Calculate the height of <header> 
    //Use outerHeight() instead of height() if have padding 
    var aboveHeight = $('header').outerHeight(); 

//when scroll 
    $(window).scroll(function(){ 

     //if scrolled down more than the header’s height 
      if ($(window).scrollTop() > aboveHeight){ 

     // if yes, add 「fixed」 class to the <nav> 
     // add padding top to the #content 
      (value is same as the height of the nav) 
      $('nav').addClass('fixed').css('top','0').next() 
      .css('padding-top','60px'); 

      } else { 

     // when scroll up or less than aboveHeight, 
      remove the 「fixed」 class, and the padding-top 
      $('nav').removeClass('fixed').next() 
      .css('padding-top','0'); 
      } 
     }); 
    }); 

來源：http://www.jay-han.com/2011/11/10/simple-smart-sticky-navigation-bar-with-jquery/

Answer 3

的解決方案很簡單，讓你的CSS，同時增加PX

nav 
{ 
    position: fixed; 
    top: 0px; 
} 

Answer 4

這裏是一個辦法做到這一點不JQuery的。 它通過將滾動監聽器設置到窗口，並在滾動到達正確位置時切換導航欄的類來工作。

var body = document.getElementsByTagName("body")[0]; 
 
var navigation = document.getElementById("navigation"); 
 

 
window.addEventListener("scroll", function(evt) { 
 
    if (body.scrollTop > navigation.getBoundingClientRect().bottom) { 
 
    // when the scroll's y is bigger than the nav's y set class to fixednav 
 
    navigation.className = "fixednav" 
 
    } else { // Overwise set the class to staticnav 
 
    navigation.className = "staticnav" 
 
    } 
 
});

h1 { 
 
    margin: 0; 
 
    padding: 10px; 
 
} 
 
body { 
 
    margin: 0px; 
 
    background-color: white; 
 
} 
 
p { 
 
    margin: 10px; 
 
} 
 
.fixednav { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.staticnav { 
 
    position: static; 
 
} 
 
#navigation { 
 
    background-color: blue; 
 
    padding: 10px; 
 
    width: 100%; 
 
} 
 
#navigation a { 
 
    padding: 10px; 
 
    color: white; 
 
    text-decoration: none; 
 
}

<h1> 
 
Hello world 
 
</h1> 
 
<nav id="navigation" class="staticnav"><a href="#">Home</a> <a href="#">About</a> 
 
</nav> 
 
<!-- We initialize the nav with static condition --> 
 
<p> 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
    Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. Some text. 
 
</p>

Answer 5

這是怎樣的導航欄枝頂端滾動過去之後。

.affix { 
 
\t top: 0px; 
 
\t margin: 0px 20px; 
 
} 
 
.affix + .container { 
 
\t padding: 5px; 
 
}

<nav class="navbar navbar-default" data-spy="affix" data-offset-top="50"> 
 
... 
 
</nav>

「導航欄」上它自己創建了一個塊，因此，所有你所要做的就是 .navbar { margin: 0px auto; /*You can set your own margin for top-bottom & right-left respectively*/ z-index: 1; } 的Z-index設置優先級只提保證金在你的CSS文件到特定的元素，以便其他元素不會滾動到其上。如果z-索引具有正值，則它具有最高優先級，否則具有最低優先級（對於負值）。 我希望這是有幫助的。