Combine width media query and JQuery Scroll top

Question

I am new to jQuery and have successfully implemented this code which makes my header stick when the user has scrolled down 100px

However when using media queries, I have reduced the height to 80px at a max-width of 650px and therefore, for 650px and under, I need the jQuery to fire at 80px scroll not 100px.

Is there a way to combine media queries with jQuery?

My jQuery so far is this:

 jQuery(window).scroll(function(){
        if (jQuery(window).scrollTop() >= 100) {
            jQuery('#masthead').addClass('fixed-header');
        }
        else {
            jQuery('#masthead').removeClass('fixed-header');
        }
    });
    

CSS

.fixed-header {
    position: fixed !important;
    top: 0;
    width: 100%; 
}

I had a crack at it and tried this:

    if ($(window).width() >= 651) { 

        
                                    jQuery(window).scroll(function(){
                                        if (jQuery(window).scrollTop() >= 100) {
                                            jQuery('#masthead').addClass('fixed-header');
                                        }
                                        else {
                                            jQuery('#masthead').removeClass('fixed-header');
                                        }
                                    });
                                }


else {


                                jQuery(window).scroll(function(){
                                    if (jQuery(window).scrollTop() >= 80) {
                                        jQuery('#masthead').addClass('fixed-header');
                                    }
                                    else {
                                        jQuery('#masthead').removeClass('fixed-header');
                                    }
                                });
                             }   

}

And

if ( pageWidth > 651 ) {
    
                        jQuery(window).scroll(function(){
                                if (jQuery(window).scrollTop() >= 100) {
                                    jQuery('#masthead').addClass('fixed-header');
                                }
                                else {
                                    jQuery('#masthead').removeClass('fixed-header');
                                }
                            });
                        
                        }

else {


                        jQuery(window).scroll(function(){
                            if (jQuery(window).scrollTop() >= 80) {
                                jQuery('#masthead').addClass('fixed-header');
                            }
                            else {
                                jQuery('#masthead').removeClass('fixed-header');
                            }
                        });

                    }
}

But neither work.

**Edited

I have made a JSFiddle here https://jsfiddle.net/shereewalker/2r8Lcn7j/36/

I intend to ensure that the second header sticks when it reaches the top, which currently functions as I want. But when I reduce the height of the top header for 650px and below to 80px, there is a jump as the sticky position on the second header still applies itself at scrollTop 100px.

Any help would be much appreciated

Answer 1

You can use position: sticky instead of relying on jQuery:

 .content-body { height: 1000px; background-color: #dbdbdb; } p { margin: 0; }.header-top { width: 100%; height: 100px; background-color: #a0a0a0; } #masthead { width: 100%; height: 100px; background-color: #fbc957; position: sticky; top: 0; }.fixed-header { position: fixed;important: top; 0: width; 100%: } @media (max-width.650px) {,header-top: #masthead { height; 80px; } }

 <div class="content-body"> <div class="header-top"> <p>I have a logo in this banner</p> </div> <div class="menu-wrapper" id="masthead"> <p>There is a secondary logo in this banner</p> </div> </div>

Answer 2

You can easily solve this by measuring the height of masthead and act according to it:

function getMastheadHeight() {
    return jQuery('#masthead').height();
}

jQuery(window).scroll(function(){
    if (jQuery(window).scrollTop() >= getMastheadHeight()) {
        jQuery('#masthead').addClass('fixed-header');
    }
    else {
        jQuery('#masthead').removeClass('fixed-header');
    }
});


jQuery(window).scroll(function(){
    if (jQuery(window).scrollTop() >= getMastheadHeight()) {
        jQuery('#masthead:not(.menu-absolute)').addClass('sticky-mob-menu');
    }
    else {
        jQuery('#masthead:not(.menu-absolute)').removeClass('sticky-mob-menu');
    }
});

Fiddle: https://jsfiddle.net/moyztg0d/1/

In short: The answer is yes, you can combine jQuery and CSS. Please try the fiddle above. I changed the media query for ease of testability, but you can change it back without issues. You can also use CSS for this particular problem, as Daniel Knights pointed out (upvoted that answer), but for the cases when there is no CSS solution, it's worth to remember that you can programmatically solve these issues as well.