導航欄在頂部使用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>