在带有固定SIdebar的滚动页眉上

Question

我正在尝试使用带有div的滚动标题，该div在向下滚动时在导航栏下方保持固定。 我正在使用w3schools的代码作为标题部分，但是我无法添加固定的div。

到目前为止，我的代码：

HTML

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<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">
  <div style="width: 100vw;padding-left: 10%;padding-right: 10%">
     <div style="min-width: 300px;width: 300px;float: left"></div>
     <div style="min-width: 600px;width: 600px;float: left"></div>
  </div>
</div>

JS

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

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

CSS

    .header {
      background-color: #f1f1f1;
      padding: 30px;
      text-align: center;
    }

    #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;
    }
    .sticky {
      position: fixed;
      top: 0;
      width: 100%;
    }

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

Answer 1

您需要检测窗口滚动。您可以执行以下操作：

window.onscroll = function() {
    //  Do something on scroll
};

现在只需在其中进行比较，或在其中进行调用即可：

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

工作fiddle