2013-06-12 97 views
1

我正在處理我的第一個網頁,並遇到了爲我的粘滯導航欄找到正確代碼的問題。導航欄已附加了一個jQuery代碼,所以我想知道這是否會影響代碼,或者如果我沒有使用正確的代碼。這裏的導航欄的HTML ...如何將粘性導航欄添加到我的網頁

   <div id="tab_container"> 
        <nav id="tabs"> 
         <ul id="nav"> 
          <li class="active"><a href="#">About</a></li> 
          <li class="inactive"><a href="#">Services</a></li> 
          <li class="inactive"><a href="#">Our Staff</a></li> 
          <li class="inactive"><a href="#">book</a></li> 
          <li class="inactive"><a href="#">Gift Cards</a></li> 
          <li class="inactive"><a href="#">Reviews</a></li> 
         </ul> 
        </nav> 
       </div> 

繼承人我CSS的吧...

#tab_container 
{ 
    background-color: #1E1E1E; 
    display: -webkit-box; 
    -webkit-box-flex: 1; 
    display: block; 
    position: relative; 
    max-width: 970px; 
    width: 100%; 
    text-align: center; 
} 

#tabs 
{ 
    float: left; 
    margin-top: 0px; 
    width: 100%; 
    max-width: 970px; 
    background-color: #1E1E1E; 
    padding-top: 20px; 
    text-align: center; 
} 

#nav 
{ 
    width: 100%; 
    max-width: 970px; 
    text-align: center; 
    background-color: #1E1E1E; 
} 

ul 
{ 
    float: left; 
    max-width: 970px; 
    display: -webkit-box; 
    -webkit-box-flex: 1; 
    width: 100%; 
    padding-left: 0px; 
    margin-bottom: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    text-align: center; 
    background-color: #1E1E1E; 
} 

ul li 
{ 
    display: inline-block; 
    text-align: center; 
    width: 158px; 
    height: 70px; 
    background-color: #1a1a1a; 
    font-size: 18px; 
    text-transform: uppercase; 
    text-align: center; 
    margin:0 auto; 
    padding: 0; 
} 

ul li a 
{ 
    color: #54544b; 
    display: block; 
    height: 100%; 
    width: 100%; 
    text-decoration: none; 
    text-align: center; 
    margin: 0px auto; 
    line-height: 70px; 

} 

a:hover 
{ 
    color: #CF7BA1; 
} 

.active a 
{ 
    text-decoration: underline; 
    color: #CF7BA1; 
    background-color: #222; 
} 

而對於jQuery的我已經列入....

$(document).ready(function(){ 
$('ul#nav li').click(function(){ 
    var number = $(this).index(); 
    $('.sec').hide().eq(number).show(); 
      $(this).toggleClass('active inactive'); 
    $('ul#nav li').not(this).removeClass('active').addClass('inactive'); 

}); 

    $('.sec').not(':first').hide(); 

}); 
+0

這將是最好的jQuery的使用? – JavaFox

+0

我可能沒有具體。當頁面滾過固定位置時,我希望導航欄粘貼到頁面的頂部。在其他作品中,我需要一個可滾動的導航欄,保留在頁面的頂部。 – JavaFox

+1

只需使用position:fixed。看到這個http://jsfiddle.net/chauhangs/42Rqf/ – NullPointerException

回答

1

嘗試position:fixed;

#tab_container 
{ 
background-color: #1E1E1E; 
display: -webkit-box; 
-webkit-box-flex: 1; 
display: block; 
position: fixed; //change this to fixed....to stick to top 
max-width: 970px; 
width: 100%; 
text-align: center; 
} 

你必須雖然補償頭部的高度,在你的div容器,所以在我的演示注意到我的200像素填充添加到「bodydiv」補償

DEMO HERE

+0

什麼是正確的jQuery使用? – JavaFox

+1

Jquery與它無關 – KyleK

1

要使它粘你會在css中使用position: fixed。這使得它保持與瀏覽器窗口相同的位置。這部分你不必使用任何jQuery。

0

即使沒有使用javascript,jquery或任何其他腳本語言,也可能有一個粘滯的導航欄。你只需要添加另一個屬性到你的CSS代碼。 所有的魔術都是position: fixed屬性。 position屬性表示HTML中特定分區的位置類型。緊隨其後的是提及像素位置的屬性。它們是topbottomrightleft。 下面是代碼:

#tab_container 
 
{ 
 
    background-color: #1E1E1E; 
 
    display: -webkit-box; 
 
    -webkit-box-flex: 1; 
 
    display: block; 
 
    position: relative; 
 
    max-width: 970px; 
 
    width: 100%; 
 
    text-align: center; 
 
    position: fixed; 
 
    top: 0px; 
 
} 
 

 
#tabs 
 
{ 
 
    float: left; 
 
    margin-top: 0px; 
 
    width: 100%; 
 
    max-width: 970px; 
 
    background-color: #1E1E1E; 
 
    padding-top: 20px; 
 
    text-align: center; 
 
} 
 

 
#nav 
 
{ 
 
    width: 100%; 
 
    max-width: 970px; 
 
    text-align: center; 
 
    background-color: #1E1E1E; 
 
} 
 

 
ul 
 
{ 
 
    float: left; 
 
    max-width: 970px; 
 
    display: -webkit-box; 
 
    -webkit-box-flex: 1; 
 
    width: 100%; 
 
    padding-left: 0px; 
 
    margin-bottom: 0px; 
 
    margin-top: 0px; 
 
    margin-right: 0px; 
 
    text-align: center; 
 
    background-color: #1E1E1E; 
 
} 
 

 
ul li 
 
{ 
 
    display: inline-block; 
 
    text-align: center; 
 
    width: 158px; 
 
    height: 70px; 
 
    background-color: #1a1a1a; 
 
    font-size: 18px; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    margin:0 auto; 
 
    padding: 0; 
 
} 
 

 
ul li a 
 
{ 
 
    color: #54544b; 
 
    display: block; 
 
    height: 100%; 
 
    width: 100%; 
 
    text-decoration: none; 
 
    text-align: center; 
 
    margin: 0px auto; 
 
    line-height: 70px; 
 

 
} 
 

 
a:hover 
 
{ 
 
    color: #CF7BA1; 
 
} 
 

 
.active a 
 
{ 
 
    text-decoration: underline; 
 
    color: #CF7BA1; 
 
    background-color: #222; 
 
}
<div id="tab_container"> 
 
        <nav id="tabs"> 
 
         <ul id="nav"> 
 
          <li class="active"><a href="#">About</a></li> 
 
          <li class="inactive"><a href="#">Services</a></li> 
 
          <li class="inactive"><a href="#">Our Staff</a></li> 
 
          <li class="inactive"><a href="#">book</a></li> 
 
          <li class="inactive"><a href="#">Gift Cards</a></li> 
 
          <li class="inactive"><a href="#">Reviews</a></li> 
 
         </ul> 
 
        </nav> 
 
       </div> 
 
       <p> Some Text <p> 
 
       <p> Some Text <p> 
 
       <p> Some Text <p> 
 
       <p> Some Text <p> 
 
       <p> Some Text <p> 
 
       <p> Some Text <p> 
 
       <p> Some Text <p> 
 
       <p> Some Text <p> 
 
       <p> Some Text <p> 
 
       <p> Some Text <p> 
 
       <p> Some Text <p> 
 
       <p> Some Text <p> 
 
       <p> Some Text <p>

這裏我們使用position: fixed之後top: 0px因爲我們要始終固定在從屏幕頂部0像素的導航欄。 如果您正在尋找一款STICKY,如問題所述,您最好選擇position: sticky。希望能幫助到你。

如果您想了解更多關於CSS的position屬性,請訪問:https://www.w3schools.com/css/css_positioning.asp