Remove class when resizing

Question

I created a menu that, depending on the size of the screen, behaves like a fixed menu. However, when resizing the screen to normal size, the menu keeps adding the class to fix it, when it wasn’t supposed to happen.

This is the menu (which is inside a sidebar):

.bottom{
    bottom: 90px;
    padding: 15px;
    height: 45px;
    box-shadow: 0 4px 2px -2px #f5f5f5;
}

This is the class used to define it as fixed:

.glue{
    position: fixed;
    width: 100%;
    z-index: 9;
    top: 0;
}

This is the code I used to fix depending on the screen size. For screens smaller than 1024px, it is fixed after rolling 410px and for screens larger than 1024px and smaller than or equal to 1125px, after 500px.

$(window).resize(function(){
    var ww = $(window).width();
    if (ww <= 1024) {
        $(window).scroll(function(){
            var scroll = $(window).scrollTop();
            if (scroll >= 410) {
                $('.bottom').addClass("glue");

            } else {
                $('.bottom').removeClass("glue");
            }
        });
    } if ((ww > 1024) && (ww <= 1125)) {
        $(window).scroll(function(){
            var scroll = $(window).scrollTop();
            if (scroll >= 500) {
                $('.bottom').addClass("glue");

            } else {
                $('.bottom').removeClass("glue");
            }
        });
    }
 });

I reproduced this problem in a separate blog, since I couldn’t get it from the editor here

Answer 1

The problem is that you are nesting events, which usually one should not do. Why? Because when you call one will accumulate in memory the other.

What you should do is use both events at the same time, the scroll and that of resize using the method .on(). I also inserted the event load, which will do the same thing if the user refreshes the page with the scroll rolled.

And you can still improve the code by assigning the $(this) (that references the event element) to a variable and use another variable (I used acao) to control when to insert and remove the class .glue:

$(window).on("load resize scroll", function(){
   var acao;
   var $t = $(this);
   var ww = $t.width();
   var scroll = $t.scrollTop();
   
   $("#testescroll").text(scroll); // linha de teste. Remova.
   
   if (
      (ww <= 1024 && scroll < 410)
      ||
      (ww > 1024 && ww <= 1125 && scroll < 500)
   ) {
      acao = true;
   }
   
   $('.bottom')[acao ? 'addClass' : 'removeClass']("glue");
   
});

/* TRECHO PARA TESTE */
#testescroll{
   position: fixed;
   top: 5px;
   right: 5px;
   background: red;
   color: white;
}

.box{
   height: 2000px;
}
/* REMOVA DAQUI PRA CIMA*/

.glue{
    position: fixed;
    width: 100%;
    z-index: 9;
    top: 0;
}

.bottom{
    bottom: 90px;
    padding: 15px;
    height: 45px;
    box-shadow: 0 4px 2px -2px #f5f5f5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id="testescroll"></span>
<div class="box">box</div>
<div class="bottom">bottom</div>

Answer 2

Let me give an alternative example to the question, using media queries (CSS) instead of Javascript. Being in charge of the user use or not.

<style>

  /* Para telas até 1024px */  
  @media only screen and (max-width: 1024px) {
  
    /* Seu bloco de código CSS aqui */
    
  }
  
  
  /* Para telas de 1025px até 1125px */  
  @media only screen and (min-width: 1025px) and (max-width: 1125px) {
  
    /* Seu bloco de código CSS aqui */
  }
  
</style>

• If you want more references about using media queries, just go to this link Developer.mozilla.org.