I am new to jQuery and seeking help without harsh judgment. My goal is to make the header fixed when scrolling down 300px on the page, and remove the fixed position if less than 300px. Additionally, I would like to animate the header by sliding it down when scrolling down and back up when scrolling to the top. A good reference for what I want can be found on this site.
Here is my HTML structure:
<div class="heading-wrapper">
<a href="#">1 </a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
Corresponding CSS:
.heading-wrapper {
width: 100%;
height: 65px;
background: #000;
position: relative;
}
.heading-wrapper.fixed {
position: fixed;
top: -80px;
left: 0;
right: 0;
}
And the jQuery script:
$(window).scroll(function() {
if ($(this).scrollTop() > 300){
$('.heading-wrapper').addClass("fixed");
$('.heading-wrapper.fixed').animate({'top' : '0px'}, 800);
}
else{
$('.heading-wrapper.fixed').animate({'top' : '-80px'}, 800);
setTimeout(function(){
$('.heading-wrapper').removeClass("fixed");
},800);
}
});
However, the current implementation does not behave as desired. Some issues include:
- No animation when scrolling with the mouse wheel
- Animation only occurs once
- The slide-up animation never triggers
- Rapid scrolling breaks the structure and styling
I kindly ask for assistance in resolving these problems. Please be patient and understanding while helping me improve this functionality! :)
For a visual representation of the issue, visit this JsFiddle link.