Adjust a small Jquery script

Hello, Job description Jquery/Javascript (HTML code below job description) ------------------------------------------------------------------------------------- The script must first detect if <div id="page" contains layout1 in CLASS. Then the script must generate: jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > 50){ jQuery('#masthead').addClass("zazasticky111111111111 animated slideInDown"); } else{ jQuery('#masthead').removeClass("zazasticky111111111111 animated slideInDown"); } }); ------------------------------------------------------------------------------------- But if the script detects if <div id="page" contains layout2 OR layout3 in CLASS. Then the script must generate: (without "111111111111") jQuery(window).scroll(function() { if (jQuery(this).scrollTop() > 50){ jQuery('#masthead').addClass("zazasticky animated slideInDown"); } else{ jQuery('#masthead').removeClass("zazasticky animated slideInDown"); } }); ------------------------------------------------------------------------------------- I also want to disable or enable the above script on different viewports. Lets say the script must execute on large and medium screens but not at mobile Or not at medium and mobile screens. Something like: Large = y Medium = N Small = N ------------------------------------------------------------------------------------- HTML ------------------------------------------------------------------------------------- <div id="page" class="hfeed site container <?php echo $zaza_optionsbase['container-shadow']; ?> <?php if($zaza_optionsbase['layout'] == '1') { echo 'layout1'; } elseif($zaza_optionsbase['layout'] == '2') { echo 'layout2'; } else { echo 'layout3'; } ?>"> <div class="second-header-width"><div class="second-header"><?php echo $zaza_optionsbase['header-secondary-editor']; ?></div></div> <header id="masthead" class="site-header columns"> <div class="header-width"> <div class="small-12 large-3 columns"> <?php if(true == $zaza_optionsbase['basic-logo']['url']) { echo '<a href="'. get_option('home'). '"/><img class="logo" alt="'. get_bloginfo('name') .'" title="'. get_bloginfo('name') .'" src="' . $zaza_optionsbase['basic-logo']['url'] . '" /></a>'; } elseif(true == $zaza_optionsbase['retina-logo']['ur bl']) { echo '<a href="'. get_option('home'). '"/><img class="logo" alt="'. get_bloginfo('name') .'" title="'. get_bloginfo('name') .'" src="' . $zaza_optionsbase['retina-logo']['url'] . '" /></a>'; } else { echo '<a href="'. get_option('home'). '"/><h1>'.get_bloginfo('name').'</h1></a>'; } ?> </div> <div class="small-12 large-9 columns"> <nav id="site-navigation" class="main-navigation" role="navigation"> <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'zaza' ); ?></button> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?> </nav><!-- #site-navigation --> </div> </div> </header><!-- #masthead -->