I've implemented a fixed menu on my website.
Everything seems to be working fine, but here's the issue:
When I scroll down and the fixed menu starts animating, if I continue scrolling quickly, the animation pauses. It only continues when I stop scrolling, eventually fixing itself in place.
Here is the JavaScript code:
function init() {
window.addEventListener("scroll", function() {
var topbar = $("#topbar"),
header = $("#header-main"),
hdr_img = $("#header-main .inner img"),
hdr_inner = $("#header-main .inner"),
search = $("#search"),
cart = $("#cart");
$(window).width() > 1200 && ($(this).scrollTop() > 235 ? (header.addClass("sabit"), hdr_inner.addClass("sabit"), search.addClass("sabit"), cart.addClass("sabit"), hdr_img.addClass("sabit"), topbar.addClass("sabit"), header.stop().animate({
top: "-44px",
opacity: 1
}, 800), topbar.stop().animate({
top: "-44px",
opacity: 0
}, 900)) : $(this).scrollTop() < 1 && (header.stop().animate({
top: "0px",
opacity: 1
}, 800), topbar.stop().animate({
top: "0",
opacity: 1
}, 1300), header.removeClass("sabit"), hdr_inner.removeClass("sabit"), search.removeClass("sabit"), cart.removeClass("sabit"), hdr_img.removeClass("sabit"), topbar.removeClass("sabit")))
})
}
window.onload = init();
Below are the CSS codes as well:
#topbar{
color:#7BBD42;
background:#2e3a47;
background-image:url("//images....com./sprites/kullanicimenupat.png");
padding:5px 0;
min-height:30px;
border-bottom:1px solid #7bbd42;
border-width:3px;
}
#topbar.sabit{
position:fixed;
width:100%;
z-index:99;
top:0;
}
#header-main{
background-color:#ffffff;
min-height:107px;
color:#8c8c8c;
}
#header-main.sabit{
position:fixed;
width:100%;
z-index:1010;
padding-top:35px;
border-bottom:1px solid #AFC999;
min-height:100px;
min-height:99px;
background:rgba(255,255,255,1);
/* Gradient background styles */
}
#header-main .inner{
text-align:left;
margin-top:25px;
padding:0;
#header-main .logo img{
/* Design for logo image */
transition:all 0.4s ease-in 0s;
}
#header-main .inner.sabit{
margin-bottom:-15px;
margin-top:18px;
}
#header-main .inner.sabit img{
max-width:75%;
margin-top:-4px;
transition:all 0.5s ease 0s;
}