导航栏在顶部使用CSS

Question

我想让我的导航栏在网页上滚动时粘在顶部。

我已经试过在这里寻找解决方案，但我挣扎着，因为它导致更多的错误。

当使用

position:fixed

我发现它会导致我要低于我的旗帜标志与原来现在的位置问题。

我的HTML和CSS代码如下。

谢谢

/* ******************* */ 
 
/* Navigiation   */ 
 
/* ******************* */ 
 

 
#sitenav a { 
 
    text-decoration: none; 
 
    color: white; 
 
    padding: inherit; 
 
    
 
} 
 

 
#sitenav ul { 
 
    background: black; 
 
    padding: 15px; 
 
} 
 
#sitenav ul li { 
 
    
 
    padding: 15px; 
 
    background: black; 
 
    display: block; 
 
    text-align: center; 
 
    font-family: 'Montserrat', sans-serif; 
 
    display: inline; 
 
} 
 

 
#sitenav ul li:hover { 
 
    background: rgb(43, 78, 89); 
 
    color:white; 
 
    cursor:pointer; 
 
}

<header class="clearfix"> 
 
    <div id="banner" class="middlecontent"> 
 
     <a href="index.html"><img src="images/logobanner.png"></a> 
 
    </div> 
 
    <nav> 
 
     <div id="sitenav"> 
 
      <ul > 
 
       <li><a href="index.html">Home</a></li> 
 
       <li><a href="#">Events</a></li> 
 
       <li><a href="#">Curriculum</a></li> 
 
       <li><a href="about_us.html">About</a></li> 
 
       <li><a href="#">Student</a></li> 
 
       <li><a href="#">Staff</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
</header>

Answer 1

如果没有需要支持旧的浏览器，你可以使用position: sticky
https://developer.mozilla.org/pl/docs/Web/CSS/position#Sticky_positioning

Answer 2

请试试这个我添加一些代码。

JQuery的：

$(window).scroll(function() { 
    var scroll = $(window).scrollTop(); 
    if (scroll >= ($("header").height())) { 
     $("#sitenav").addClass("fix-header"); 
    } else { 
     $("#sitenav").removeClass("fix-header"); 
    } 
}); 

的CSS：

body{ 
    margin:0; 
} 
section{ 
    background:#ccc; 
    height:800px; 
} 
#sitenav.fix-header { 
    position: fixed; 
    width: 100%; 
    left: 0; 
    right: 0; 
    top: 0; 
    margin:0; 
} 
#sitenav.fix-header ul{ 
    margin:0; 
} 

$(window).scroll(function() { 
 
    var scroll = $(window).scrollTop(); 
 
    if (scroll >= ($("header").height())) { 
 
     $("#sitenav").addClass("fix-header"); 
 
    } else { 
 
     $("#sitenav").removeClass("fix-header"); 
 
    } 
 
});

/* ******************* */ 
 
/* Navigiation   */ 
 
/* ******************* */ 
 

 
#sitenav a { 
 
    text-decoration: none; 
 
    color: white; 
 
    padding: inherit;  
 
} 
 

 
#sitenav ul { 
 
    background: black; 
 
    padding: 15px; 
 
} 
 
#sitenav ul li {  
 
    padding: 15px; 
 
    background: black; 
 
    display: block; 
 
    text-align: center; 
 
    font-family: 'Montserrat', sans-serif; 
 
    display: inline; 
 
} 
 

 
#sitenav ul li:hover { 
 
    background: rgb(43, 78, 89); 
 
    color:white; 
 
    cursor:pointer; 
 
} 
 
body{ 
 
    margin:0; 
 
} 
 
section{ 
 
    background:#ccc; 
 
    height:1000px; 
 
} 
 
#sitenav.fix-header { 
 
    position: fixed; 
 
    width: 100%; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    margin:0; 
 
} 
 
#sitenav.fix-header ul{ 
 
    margin:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header class="clearfix"> 
 
<div id="banner" class="middlecontent"> 
 
    <a href="index.html"><img src="images/logobanner.png"></a> 
 
</div> 
 
<nav> 
 
    <div id="sitenav"> 
 
     <ul> 
 
      <li><a href="index.html">Home</a></li> 
 
      <li><a href="#">Events</a></li> 
 
      <li><a href="#">Curriculum</a></li> 
 
      <li><a href="about_us.html">About</a></li> 
 
      <li><a href="#">Student</a></li> 
 
      <li><a href="#">Staff</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</header> 
 
<!--this for demo for checking scroll--> 
 
<section> 
 

 
</section>

Answer 3

你应该试试这个代码。

$(window).ready(function() { 
 
     var header = $('nav').innerHeight(); 
 
     var window_scroll = $(window).scrollTop(); 
 
     if (window_scroll >= header) $("nav").addClass("sticky"); 
 
     else $("header").removeClass("nav"); 
 
    }) 
 
    $(window).on("scroll", function() { 
 
     var header = $('nav').innerHeight(); 
 
     var scroll = $(window).scrollTop(); 
 
     if (scroll >= header) $("nav").addClass("sticky"); 
 
     else $("nav").removeClass("sticky"); 
 
    });

nav{ 
 
    position:absolute; 
 
    width:100%; 
 
    height:50px; 
 
    top:0; 
 
    left:0; 
 
} 
 
nav.sticky{ 
 
    position:fixed; 
 
    width:100%; 
 
    z-index:99; 
 
    top:0; 
 
    left:0; 
 
} 
 
#sitenav a { 
 
    text-decoration: none; 
 
    color: white; 
 
    padding: inherit; 
 
    
 
} 
 

 
#sitenav ul { 
 
    background: black; 
 
    padding: 15px; 
 
} 
 
#sitenav ul li { 
 
    
 
    padding: 15px; 
 
    background: black; 
 
    display: block; 
 
    text-align: center; 
 
    font-family: 'Montserrat', sans-serif; 
 
    display: inline; 
 
} 
 

 
#sitenav ul li:hover { 
 
    background: rgb(43, 78, 89); 
 
    color:white; 
 
    cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<head> 
 
\t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
</head> 
 
<body> 
 
<header class="clearfix"> 
 
    <div id="banner" class="middlecontent"> 
 
     <a href="index.html"><img src="images/logobanner.png"></a> 
 
    </div> 
 
    <nav> 
 
     <div id="sitenav"> 
 
      <ul > 
 
       <li><a href="index.html">Home</a></li> 
 
       <li><a href="#">Events</a></li> 
 
       <li><a href="#">Curriculum</a></li> 
 
       <li><a href="about_us.html">About</a></li> 
 
       <li><a href="#">Student</a></li> 
 
       <li><a href="#">Staff</a></li> 
 
      </ul> 
 
     </div> 
 
    </nav> 
 
</header>    
 
</body> 
 
</html>