I am facing an issue with my menu that has 2 levels. Whenever I try to scroll down, I want the position of the Logo to change to the bottom of the menu smoothly. However, during scrolling, there is a noticeable shake in the menu movement which makes it appear 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>
<li>content</li>
</ul>
</div>Could you please assist me in identifying the root cause of this issue and providing potential solutions?