Header doesnt hide/show again after certain scroll-CodePudding

Hello Why does my Script not work? I created two header, one should hide and the other show after 1980px of scroll which works! But then i want it to hide and show again after 2500px so basicallythat its just like in the beginning with out any scroll anymore.

$(window).scroll(function() {

    if ($(this).scrollTop()>1980)
     {
        $('#navBar').fadeOut();

     }
    
    else if ($(this).scrollTop()>2500)
    {
           $('#navBar').fadeIn();
    }
    else
     {
      $('#navBar').fadeIn();
            
     }
 });

CodePudding user response：

i believe that for your second condition the first one is also true.so i think you can limit the first one like this.in other words you need to make a more specific condition

$( document ).ready(function() {
            console.log( "ready!" );
            $(window).scroll(function() {
                var scrollTop = $(this).scrollTop()
                if (1980<scrollTop && scrollTop<2500)
                 {
                   console.log("firstPoint");
                 }
                 else if (2500<scrollTop && scrollTop<3000)
                 {
                   console.log("secondPoint");
                 }
                 else {
                    console.log("thirdPoint");
                 }
             });
        });