How to add additional if statement to an existing javascript function for screen width?

Question

I have a Javascript code where I would like to add an additional rule for the if statement- if the screen width is below 767px, then keep the CSS class attribute 'av_header_transparency' Below is the code in question:

 if (transparent) { if (st > 50) { //header.removeClass('av_header_transparency'); av_change_class(header, 'remove', 'av_header_transparency'); } else { //header.addClass('av_header_transparency'); av_change_class(header, 'add', 'av_header_transparency'); } } 

Currently this code is removing a CSS class 'av_header_transparency' if scrolling down for 50px, but I would like to keep this on mobile screen. Is this possible?

Regards

Answer 1

CSS Media Queries are perfect for this:

 @media screen and (max-width:767px) { header.someClass { /* styles for screeens up to 767px */ } } @media screen and (min-width:768px) { header.someClass { /* styles for screeens larger than 768px */ } } 

Answer 2

not sure its explained properly, but you could check screen width before removing it, so something like

if(transparent)
{   
    if(st > 50 && window.innerWidth >767)
    {   
                //header.removeClass('av_header_transparency');
        av_change_class(header, 'remove', 'av_header_transparency');
    }
    else
    {
        //header.addClass('av_header_transparency');
        av_change_class(header, 'add', 'av_header_transparency');
    }
}