平滑滚动菜单

Question

我有一个2级菜单。当我想向下滚动时，我想将Logo的位置更改为底部菜单。我想要平滑滚动，但是现在当我向下滚动时，可以看到滚动过程中菜单的晃动，基本上是不平滑的。

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

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.querySelector(".nav1").style.fontSize = "25px";
    document.querySelector("h4").style.position = "relative";
    document.querySelector("h4").style.top = "55px";
    document.querySelector(".menu").style.position = "fixed";


  } else {
     document.querySelector(".nav1").style.fontSize = "20px";
    document.querySelector("h4").style.position = "relative";
    document.querySelector("h4").style.top = "0px";
    document.querySelector(".menu").style.position = "relative";
  }
}

.menu {
  background:gray;
}
.menu, .nav1 {
  width:100%;
  transition: all 0.6s ease;

}
.nav1 >h4 {
  border:2px solid blue;
  width:50px;
    transition: all 0.6s ease;

}
.nav2>ul {
  display:flex;
  justify-content:space-evenly;
  border:2px solid red;
}

<div class="menu">
  <div class="nav1">
    <h4>Logo</h4>
  </div>
  <div class="nav2">
    <ul>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li></ul>
  </div>
</div>
<div class="content">
  <ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
  </ul>
</div>

可能是什么问题以及如何解决？

Answer 1

您可以在position: sticky上使用.menu。

请注意此处：粘性在IE中不起作用

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

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.querySelector(".nav1").style.fontSize = "25px";
    document.querySelector("h4").style.position = "relative";
    document.querySelector("h4").style.top = "55px";


  } else {
     document.querySelector(".nav1").style.fontSize = "20px";
    document.querySelector("h4").style.position = "relative";
    document.querySelector("h4").style.top = "0px";
  }
}

.menu {
  background:gray;
  position: sticky; 
  top: 0;
}
.menu, .nav1 {
  width:100%;
  transition: all 0.6s ease;

}
.nav1 >h4 {
  border:2px solid blue;
  width:50px;
    transition: all 0.6s ease;

}
.nav2>ul {
  display:flex;
  justify-content:space-evenly;
  border:2px solid red;
}

<div class="menu">
  <div class="nav1">
    <h4>Logo</h4>
  </div>
  <div class="nav2">
    <ul>
    <li>list</li>
    <li>list</li>
    <li>list</li>
    <li>list</li></ul>
  </div>
</div>
<div class="content">
  <ul>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
    <li>content</li>
  </ul>
</div>