javascript - 如何创建粘性导航栏？

Question

当我向下滚动页面时，我试图让导航栏粘在页面顶部。我已经包含了一个 JS fiddle :https://jsfiddle.net/1qsy0Lwu/我完全按照 w3schools 的示例进行操作，但它不起作用。请帮忙。

在我的研究中，我注意到 offsetTop 和 offset().top 之间的区别。我感觉问题与我的 css 中的某些内容有关。

我还注意到，当在 JavaScript 中应用 offsetTop 时，导航栏中的链接不起作用。虽然控制台中没有显示错误。但是，当我实现 offset().top 时，控制台中显示错误...但导航栏链接有效

HTML

<div id="navbar">
    <a class="active" href="#">Apps</a> 
    <a href="#">TAB 1 </a> 
    <a href="#">TAB 2</a>
    <a href="#">TAB 3</a>
    <a href="#">TAB 4</a>
</div>

<div class="container">
CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT  CONTENT 
</div>

CSS

#navbar {
overflow: hidden;
background-color: #161717;
margin-top: 0.1%;
text-align: center;
}

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

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

#navbar a.active {
background-color: #1e272d;
color: white;
 }

.container {
padding: 16px;
}

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

.sticky + .container {
padding-top: 1000px;
}

JS

$(document).ready(function () {

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

});

Answer 1

您可以使用纯CSS position: sticky 。要定义距离顶部多远该值变得粘性，请修改 top 属性。

nav {
  position: sticky;
  top: 0;
}

示例 1

body {
  padding: 0;
  margin: 0;
}

nav {
  position: sticky;
  top: 0;
}

nav>ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  background: red
}

nav>ul>li {
  padding: 10px;
}

<nav>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</nav>
<div>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>

示例 2

body {
  padding: 0;
  margin: 0;
}

nav {
  margin-top: 80vh;
  position: sticky;
  top: 0;
}

nav>ul {
  margin: 0;
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  background: red
}

nav>ul>li {
  padding: 10px;
}

<nav>
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</nav>
<div>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
  <p>Content</p>
</div>