I'm struggling to implement a smooth scroll effect on the header of my website. My approach involves using transform:translate3d for animation, with the goal of keeping the header fixed at the top and moving it out of view as the user scrolls down. I have added classes for fixed positioning and sliding down into view to achieve this effect.
However, when scrolling down, instead of a seamless motion, the header seems to jerk into view or even bounce up and down when scrolling slowly. This unexpected behavior has me puzzled.
Any insights on why this might be occurring?
jQuery(document).ready(function($) {
$(window).scroll(function() {
if ($(this).scrollTop() > 75) {
$('body').addClass('scroll-1');
} else {
$('body').removeClass('scroll-1');
}
if ($(this).scrollTop() > 100) {
$('body').addClass('scroll-2');
} else {
$('body').removeClass('scroll-2');
}
});
});html {
position:relative;
height:100%;
background-color:darkorange;
}
body {
min-height:100%;
margin:0;
padding:0;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
.header {
position:absolute;
height:50px;
width:100%;
background-color:transparent;
border-bottom-color:black;
border-bottom-width:2px;
border-bottom-style:solid;
transition: all .5s;
}
body.scroll-1 .header {
position:fixed;
background-color:#fff;
transform:translate3d(0px,-50px,0px);
transition: background-color 0s, transform .6s;
}
body.scroll-2 .header {
transform:translate3d(0px,0px,0px);
transition: background-color 0s, transform .6s;
}
ul.menu {
display:inline-block;
}
ul.menu li {
color:green;
display:inline-block;
margin: 0px 20px;
}
.content {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
width:85%;
height:1000px;
margin-top:80px;
margin-left:auto;
margin-right:auto;
padding-top:20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header class="header">
<ul class="menu">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</header>
<div class="content">
</div>