固定頂級菜單隨着內容一起滾動

我正在嘗試製作一個固定的頂級菜單。在一個> 1170px的視口（這是我的最小頁面視口），一切都很好。在小於1170px的視口中，頁面的主要內容是可水平滾動的（ok），但#main-menu僅在當前窗口高度顯示，因此最後的項目被隱藏。固定頂級菜單隨着內容一起滾動

是否可以使此菜單固定爲和以充當可滾動內容的一部分？

該網站將是而不是響應。

HTML：

<nav id="main-menu"> 
    <div class="container"> 
     <ul class="nav"> 
      <li id="item1"><a href="#">Menu item 1</a></li> 
      <li id="item2"><a href="#">Menu item 2</a></li> 
      <li id="item3"><a href="#">Menu item 3</a></li> 
      <li id="item4"><a href="#">Menu item 4</a></li> 
      <li id="item5"><a href="#">Menu item 5</a></li> 
     </ul> 
    </div> 
</nav> 

<div id="content"> 
    <div class="container"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum odio et interdum pretium.</p> 
    </div> 
</div>

CSS

body { 
    background-color: #000; 
    color: #fff; 
    font-size: 17px; 
    min-width: 1170px; 
} 
.container { 
    width: 1170px; 
} 
#main-menu { 
    position: fixed; 
    height: 68px; 
    width: 100%; 
    display: block; 
    top: 0px; 
    z-index: 500; 
} 

#content { 
    position: relative; 
    top: 150px; 
}

DEMO： http://jsfiddle.net/zyqkrwtk/1/

我知道它是通過設置部分可解菜單，但會有額外的滾動條，這是不可取的。

編輯：對不起，我忘了提及重要的事情 - 頁面內容實際上很長（這將是一頁微型），所以固定的位置，因此是可取的。 更新的演示 - http://jsfiddle.net/fvgf2mj6

來源

2015-09-17 Michal Fíbek

[居中固定元素，但水平滾動]可能的重複（http://stackoverflow.com/questions/5250573/centering-a-fixed-element-but-scroll-it-horizontally） –

謝謝，我我會檢查這個問題。 –

您有不必要的CSS規則使用position。

我在這裏修改了你的代碼http://jsfiddle.net/nuc4s6h9/基本上我刪除了#content元素的樣式和＃主菜單元素的position:relative。開箱即用的這2個元素有display:block，這使得它們呈現一個在另一個之下。

讓我知道，如果這是你想要的。

來源

2015-09-17 14:23:18 mvpasarel

對不起，我忘了提重要的事情 - 網頁內容很長，固定的位置因此，希望 **演示：** http://jsfiddle.net/fvgf2mj6/ –

不幸的是，這是不可能用純CSS。 – mvpasarel

是否有可能與一些（理想的平臺無關）的JS代碼？ –

好的，所以我回來了我的解決方案！我已經在這個類似的問題啓發Centering a fixed element, but scroll it horizontally

基本上一切，我不得不改變是

#main-menu { 
position: absolute 
...

，並添加這個小jQuery代碼設置菜單的位置和寬度，當用戶滾動/調整窗口大小：

var alignMenu = function() { 
    $('#main-menu').css({ 
     'top': $('body').scrollTop(), 
     'width': $('#vystuduj-to').width() 
    }) 
} 

$(window).scroll(function(){ alignMenu() }); 
$(window).resize(function(){ alignMenu() });

DEMO：http://jsfiddle.net/LorLe7jx/

感謝大家的指出正確的方向！

來源

2015-09-17 14:58:53

固定頂級菜單隨着內容一起滾動

回答

相關問題