On the mobile version of Firefox, everything works perfectly. However, there seems to be a bug in Chrome with the fixed positioning. When scrolling, the header should change from absolute to fixed and the height should go from 65 to 35 pixels. Unfortunately, it's flickering.
I am relatively new to web development, and this is my first static website. I am using the jQuery plugin skrollr.
Here is my jQuery code:
$(window).scroll(function(){
if ($(this).scrollTop() > 20) {
$('.menu').addClass("sticky");
}
else {
$('.menu').removeClass("sticky");
}
});
And here is my CSS code:
.menu {
position: absolute;
background: white;
height: 65px;
}
.menu.sticky {
position:fixed;
height: 37px;
max-width: 480px;
padding: 0;
background: white;
}
Please help! I've been stuck on this problem for a week already.