当菜单栏固定到屏幕顶部时垂直滚动跳转

Question

我写了一个带有菜单标题的网页，当页面向下滚动时，当菜单标题到达页面顶部时固定到顶部。 但是我找到的代码（绝对的 javascript 初学者）和实现的代码在滚动中创建了一个跳跃。 据我了解，这与 css div 高度“消失”有关，一旦我将其固定到页面顶部。 HTML：

  <div class="home-header">
    <div class="caption">
    </div>
  </div>

  <div class="header" id="header">
    <ul class="nav">
      <li><a href="">PAGE 1</a></li>
      <li><a href="">PAGE 2</a></li>
      <li><a href="">PAGE 3</a></li>
      <li><a href="">PAGE 4</a></li>
    </ul>
  </div>

CSS：

body {
  margin: 0;
}
.home-header {
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('https://images.unsplash.com/photo-1495443396064-16fd983acb6a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80') center no-repeat;
  background-size: cover;
  width: 100vw;
  height: 35vw;
}
.caption {
  color: #f2f2ee;
}
/* NAVIGATION */
.header {
  padding-top: 5px;
  padding-bottom: 5px;
  font-family: proxima-nova, sans-serif;
  font-weight: 400;
  font-style: normal;
  background: #888;
}
.sticky {
  position: fixed;
  top: 0;
  background-color: #18361f;
  width: 100%;
  background: #888;
}
.nav {
  width: 100%;
  padding: 0;
  display: table;
  text-align: center;
  font-size: 1rem;
  list-style: none;
}
.nav li {
  display: inline-block;
  float: none;
  margin-right: 15px;
  margin-left: 15px;
}

Javascript：

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

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

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

有问题的代码的JSFiddle 。 我目前使用<script> </script>命令直接在我的 html 文件中运行 javascript 代码。 我在这里尝试了 stackexchange 答案，但它不起作用，我找到了另一个解决方案（我再也找不到 stackexchange 页面），导致菜单栏在实际到达之前跳转到浏览器屏幕的顶部那里。 我是否可以使用其他解决方案来解决此滚动跳跃问题？ （当我运行上述解决方案代码时，我确实将 jquery api 添加到我的 html 的标题中。）

Answer 1

您可能想使用position: sticky; ...

.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

...它很新，所以请注意您的浏览器版本要求。

编辑：这支笔... https://codepen.io/bstees/pen/yLyMZYE

Answer 2

您只需使用 CSS 即可完成此操作，无需 JavaScript。 我已经修改了你的小提琴来做到这一点。

我将这些添加到您的标题 CSS 类中。

position: sticky;
top: 0;

https://jsfiddle.net/jd3etnyc/

 body { margin: 0; } .home-header { display: flex; justify-content: center; align-items: center; background: url('https://images.unsplash.com/photo-1495443396064-16fd983acb6a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80') center no-repeat; background-size: cover; width: 100vw; height: 35vw; } .caption { color: #f2f2ee; } /* NAVIGATION */ .header { padding-top: 5px; padding-bottom: 5px; font-family: proxima-nova, sans-serif; font-weight: 400; font-style: normal; background: #888; position: sticky; top: 0; } .sticky { position: fixed; top: 0; background-color: #18361f; width: 100%; background: #888; } .nav { width: 100%; padding: 0; display: table; text-align: center; font-size: 1rem; list-style: none; } .nav li { display: inline-block; float: none; margin-right: 15px; margin-left: 15px; }

 <div class="home-header"> <div class="caption"> </div> </div> <div class="header" id="header"> <ul class="nav"> <li><a href="">PAGE 1</a></li> <li><a href="">PAGE 2</a></li> <li><a href="">PAGE 3</a></li> <li><a href="">PAGE 4</a></li> </ul> </div> blabla1<br>blabla2<br>blabla3<br>blabla4<br>blabla5<br>blabla6<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla <br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla<br>blabla

Answer 3

粘性标题覆盖页面上的其他元素。 在滚动之前，您需要向内容添加一个“缓冲区”，以便它最初不会被覆盖。 这个缓冲区是通过边距/填充来实现的，并且通常以与粘性标题高度匹配的数量开始。

下面我更新了您的代码以通过类添加此“缓冲区”。

注意：这是用于使用固定定位的粘性标题。

 window.onscroll = function() { myFunction() }; var header = document.getElementById("header"); var main = document.querySelector( 'main' ); var sticky = header.offsetTop; function myFunction() { if (window.pageYOffset > sticky) { header.classList.add("sticky"); main.classList.add( 'sticky-buffer' ); } else { header.classList.remove("sticky"); main.classList.remove( 'sticky-buffer' ); } }

 body { margin: 0; } .home-header { display: flex; justify-content: center; align-items: center; background: url('https://images.unsplash.com/photo-1495443396064-16fd983acb6a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80') center no-repeat; background-size: cover; width: 100vw; height: 35vw; } .caption { color: #f2f2ee; } /* NAVIGATION */ .header { padding-top: 5px; padding-bottom: 5px; font-family: proxima-nova, sans-serif; font-weight: 400; font-style: normal; background: #888; } .sticky { position: fixed; top: 0; background-color: #18361f; width: 100%; background: #888; } .sticky-buffer { padding-top: 60px; /* <-- .header height */ } .nav { width: 100%; padding: 0; display: table; text-align: center; font-size: 1rem; list-style: none; } .nav li { display: inline-block; float: none; margin-right: 15px; margin-left: 15px; }

 <div class="home-header"> <div class="caption"> </div> </div> <div class="header" id="header"> <ul class="nav"> <li><a href="">PAGE 1</a></li> <li><a href="">PAGE 2</a></li> <li><a href="">PAGE 3</a></li> <li><a href="">PAGE 4</a></li> </ul> </div> <main> blabla1 <br> blabla2 <br> blabla3 <br> blabla4 <br> blabla5 <br> blabla6 <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla <br> blabla </main>