使用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

您应该尝试此代码。

＆＃13;

＆＃13;

 $(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");
    });

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
	<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>

＆＃13;

＆＃13;

＆＃13;