固定菜單頂部但不是第一個元素

Question

我如何使用position：fixed;對於我的菜單，當它不是網站上的第一個元素時。 我的標誌是網站上的首選項目，之後是菜單。當我向下滾動頁面時，我希望菜單成爲頂層元素。我怎樣才能做到這一點？和只有CSS可能嗎？

Answer 1

這將需要使用javaScript，但可以很簡單地完成。

例

JsFiddle

HTML

<header> 
    <p class="site-title"> 
     <a href="#">Your logo here</a> 
    </p> 
    <nav> 
     <ul> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
     </ul> 
    </nav> 
</header> 

CSS

ul{ 
    background-color: red; 
    margin: 0; 
} 

ul li{ 
    display: inline; 
} 

.fixed{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

jQuery的

$(function() 
    { 
     // Get the initial position of the menu. 
     var menuTop = $('nav').offset().top; 

     $(window).scroll(function() 
     { 
      // Check position 
      if ($(window).scrollTop() > menuTop) 
      { 
       $('nav').addClass('fixed'); 
      } 
      else 
      { 
       $('nav').removeClass('fixed'); 
      } 
     }); 
    });