如何制作粘性导航栏？答案

【问题标题】：How to make a sticky navbar?如何制作粘性导航栏？
【发布时间】：2020-04-26 08:46:41
【问题描述】：

我正在尝试编写一些代码来制作一个粘性导航栏，这样当我向下滚动时位置是固定的，但是它不起作用。我想知道 CSS 是否有问题，因为大多数 HTML 和 javascript 不会真正影响它。我在我的其他一些网站上尝试过，它们可以正常工作，但在这个网站上似乎不起作用。

<div id="main-nav">
    <nav>
        <h2 id="logo" class="main-nav">Captain Max from ERA</h2>
        <br>
        <ul class="main-nav">
            <li> <a href="#">Listings</a></li>
            <li> <a href="#">Get in touch</a></li>
            <li> <a href="#">Projects</a></li>
        </ul>
    </nav>
</div>

脚本在这里，但我不确定这是否有任何问题。

<script>
var navbar = document.getElementById("main-nav");
var sticky = navbar.offsetTop;
function myFunction() {
    if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
</script>

CSS 在这里，似乎我创建了一个属性来改变粘滞键盘的工作方式。

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

.sticky + .content {
  padding-top: 60px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
    html {
    font-family: 'Raleway', sans-serif;
    font-size: 20px;
    font-weight: 300;
    text-rendering: optimizeLegibility;
}

nav {
    background-color: #7b8195;
    color: #e9e6df;
    overflow: hidden;
}

#logo {
    font-family: 'Raleway', sans-serif;
    font-size: 250%;
    border-top: 10px;
    padding-right: 150px;
    padding-left: 10px;
    padding-top: 10px;
}

nav li {
    display:inline-block;
    margin-left: 40px;
}

.main-nav {
    float: left;
    list-style: none;
    margin-right: 60px;
    border-bottom: 10px;
    padding-bottom: 10px;
}

.main-nav li a {
    float: right;
    color: #e9e6df;
    text-decoration: none;
    font-size: 90%;
}

.main-nav li a:link,
.main-nav li a:visited{
    padding-bottom: 8px;
    color: #e9e6df;
    text-decoration: none;
    font-size: 90%;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.2s;
}

.main-nav li a:hover,
.main-nav li a:active{
   border-bottom: 2px solid #e9e6df;
}

网站链接是here

【问题讨论】：

不应该是 document.getElementById('main-nav') 吗？此外，您不需要在 h2 和 ul 上使用相同的类 - 您可以使用 .main-nav ul 来定位 ul。
哦，好的，谢谢。我会试试的。

标签： javascript html css onscroll

【解决方案1】：

我在您的网站上看到的是您没有正确关闭script。你错过了一个closed } 胸罩。

<script>
var navbar = document.getElementById("main-nav");
var sticky = navbar.offsetTop;
function myFunction() {
    if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
    } else {
        navbar.classList.remove("sticky");
    }
   }

</script>

【讨论】：

好的，谢谢。我会试试的。编辑：虽然它似乎仍然不起作用。
您是否对您的网站进行了更改？因为我看不到任何变化。
哦，我刚刚在括号中测试了它。稍后将与许多其他内容一起上传。
好的。谢谢。我这样做是为了我的朋友，所以这是他的网站。
别忘了点赞meta.stackexchange.com/questions/5234/…Should I upvote the accepted answer? If an answer has helped you solve your problem and you accept it, you should also consider voting it up if you have the reputation. If other answers have been helpful too, you can also vote them up. Unlike accepting an answer, you can upvote as many answers to your question as you like.

【解决方案2】：

一切都正确，但您必须在下面添加一些 CSS 才能使其正常工作。

<style>
#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: lightblue;
  color: black;
}

#navbar a.active {
  background-color: blue;
  color: white;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
</style>

完整代码在这里：

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: lightblue;
  color: black;
}

#navbar a.active {
  background-color: blue;
  color: white;
}
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="navbar">
  <a class="active" href="javascript:void(0)">Home</a>
  <a href="javascript:void(0)">News</a>
  <a href="javascript:void(0)">Contact</a>
</div>

<div class="content">
  <h3>Sticky Navigation Example</h3>
  <p>The navbar will stick to the top when you reach its scroll position.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>

【讨论】：

谢谢，但是我添加了CSS，只是我忘记添加了...谢谢提醒！但是，我的仍然无法正常工作。
您能给我一个建议吗，当视口更改为