Плавная прокрутка меню

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>