固定菜单顶部但不是第一个元素

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'); 
      } 
     }); 
    });