如何制作粘性导航栏？

Question

我正在尝试编写一些代码来制作一个粘性导航栏，以便在我向下滚动时位置固定，但是，它不起作用。我想知道 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;
}

网站的link是here

Answer 1

一切都正确，但您必须在下面添加一些 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>

Answer 2

我在您的网站上看到的是您没有正确关闭 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>

如何制作粘性导航栏？

How to make a sticky navbar?

html

javascript

css

onscroll