Remove scroll function upon window resize/media query

Question

I have a navigation menu set to display:none, which appears upon scroll and disappears once back at the top.

Is there a way to disable the scroll function once I reach a certain breakpoint (ex. max-width: 786px) and display the menu?

Javascript

$(window).on("scroll", function() {

        if($(window).scrollTop()) {
              $('nav').addClass('show');
        }

        else {
              $('nav').removeClass('show');
        } 
  })

CSS

.show {

   display: block

      }

yes, simply add a test inside the scroll for the width of the browser — Temani Afif, Jun 01 '18 at 00:20
check width `$(window).width()` [find browser width](https://stackoverflow.com/questions/1038727/how-to-get-browser-width-using-javascript-code) — WPDev, Jun 01 '18 at 00:28

protango · Answer 1 · 2018-06-01T00:37:32.310

You can solve this using either javascript or CSS, however I would personally go with the javascript one.

First up, for a javascript solution, the function you need is:

window.innerWidth

It will return the entire window width not including scroll bars. Read more about it here.

So, as Temani Afif suggested, you would write a test inside your scroll function to check for the desired window width like so:

$(window).on("scroll", function() {
    if (window.innerWidth <= 786) return;

    // Your other code here
})

For a purely CSS solution, you could override the effect of the 'show' class with a media query:

.show {
   display: block
}
@media screen and (max-width: 786px) {
    nav {
       display: block !important
    }
}

More on media queries here

score 0 · Answer 2 · answered Jun 01 '18 at 00:47

You can activate/deactivate the scroll listener on browser resize. This way your scroll listener wont be called everytime user scrolls when browser width is more than 786px.

var scrollListenerActive = false;
var handleScrollListener = function() {
if( $(window).width() < 786 && !scrollListenerActive ) {
  $(window).on("scroll", function() {

        if($(window).scrollTop()) {
              $('nav').addClass('show');
        }

        else {
              $('nav').removeClass('show');
        } 
  });
  scrollListenerActive = true;
} else {
   $(window).off("scroll");
   scrollListenerActive = false;
}
}
$(document).ready(handleScrollListener); // attach the listener on page load
$(window).resize(handleScrollListener); // attach/remove listener on window resize

jdmayfield · Answer 3 · 2018-06-01T01:14:11.680

That's a good strategy above, however the event you want to listen for is simply 'resize', on the window object (some older browsers can do it on any dom element, but better to be consistent and current with the standard).

So something like:

window.addEventListener('resize',function(){
  if(window.innerWidth >= 768){
    document.body.style['overflow-x'] = 'hidden';
  }
  else{
    document.body.style['overflow-x'] = 'auto';
  }
});

You can trade 'auto' for 'scroll' if you want the scrollbar to always show when less than 768.

Similarly, you can switch out 'overflow' instead of 'overflow-x' if you want to affect both scrollbars.

Keep in mind that the event tends to fire for every width and height change as the window is resized, in case you have other logic that might have an issue with firing many times (thousands or more) as it is resized.

This also works on maximize/restore, as they trigger the resize event as well.

Here's MDN's doc on the resize event if needed: https://developer.mozilla.org/en-US/docs/Web/Events/resize

This is vanilla javascript, so it should work whether you're using a lib like jquery or not.

Remove scroll function upon window resize/media query

3 Answers3