jrobazzi jrobazzi - 3 months ago 7
jQuery Question

Jquery function preventing website to scroll all the way down

I have a fixed header on my website that shrinks on page scroll with this function:

jQuery(document).ready(function($) {
$(window).scroll(function () {
if ($(window).scrollTop() > 350) {
$('header').addClass('shrink');
}
else{
$('header').removeClass('shrink');
}
});
});


When viewing the website on a mobile device, I want to remove the fixed header, leaving it to be just a regular header, so this is what I did:

if ($(window).width() < 769) {
$('header').removeClass('shrink');
}


The problem is that now the website won't scroll all the way down on mobile.
Can anyone help me fix this, please?

Answer

Sorry... stackoverflow doesn't allow formatting in comment.

Try this...

  .shrink { 
    position:fixed; 
    clear:both!important; 
    width:100%; 
    height:50px!important; 
    max-height:50px!important; 
    min-height:50px!important; 
    z-index:999999999; 
    transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -webkit-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
}

@media screen and (max-width: 769px) {
    .shrink {
       position: static;
    }
}