Hello.

$(document).ready(function() { var removeTimeoutID, $menu = $('#super'); $(window).scroll(function() { clearTimeout(removeTimeoutID); $menu.addClass('new-class'); removeTimeoutID = setTimeout(function(){ $menu.removeClass('new-class'); }, 150); }); }); 
 #super { width: 200px; height: 200px; position: fixed; top: 0; background: #000;} .new-class { background: #ff0000 !important;} 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <div id="super" class="menu"> Content </div> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p> <p>datad</p>

There is such a code, thanks to which the horizontal menu becomes translucent during scrolling. But there are two problems:

  1. I can not cram it into a condition that the script is executed only if the screen resolution is within 768 - 1280px. Tried to conclude in a condition

    if ($ (window) .width ()> 768 && $ (window) .width () <1280) {

But then it stopped working at all. It is necessary that the script reacts to resize (went beyond - not to execute, again within the limits - to work).

  1. If you are not at the very top of the page and are being updated, the block seems to blink, due to the fact that the script first adds the class and then deletes it.
  • so write a condition in the body of $(window).scroll(function() { - Blacknife
  • @Blacknife, yes my cant, the browser window of the wrong size set and wondered why it does not work))) but point 2 is still relevant. And yet, for some reason, the lower limit on smartphones is not taken into account, i.e. the script works on all resolutions up to 1280. Is there something in js like a viewport like in css media? - Aaron

0