My goal is to make the header visible when scrolling down, but I don't want it to scroll on mobile devices. Here is the jQuery code that I have been working with:
$(window).scroll(function () {
if ( $(this).scrollTop() > 652 && !$('header').hasClass('open') ) {
$('header').addClass('open');
$('header').slideDown();
} else if ( $(this).scrollTop() <= 652 ) {
$('header').removeClass('open');
$('header').slideUp();
}
});
This code works for desktop, but not for mobile or tablet versions. I attempted to use CSS media queries to hide the header, like this:
@media screen {
header { display: none;}
}
Unfortunately, the CSS approach did not produce the desired result.