CODEWITHSUNDEEP
javascripthtmlcss
Asking
Asking

Reputation: 4192

Smooth scroll of the menu

I have a menu with 2 levels. When i want to scroll down i want to change the position of Logo to the bottom menu. I want a smooth scroll, but now when i scroll down i can see a shake of the menu in process of scrolling, basically is not smooth. 

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>

What could be the issue and how to solve it?

Upvotes: 0

Views: 54

Answers (1)

Ilijanovic
Ilijanovic

Reputation: 14904

You can use position: sticky on .menu.

Note here: sticky doesnt work in 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>

Upvotes: 1

Related Questions