0

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();
            
     }
 });
oli venöl
  • 25
  • 5

1 Answers1

0

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");
                 }
             });
        });
Arash Seifi
  • 385
  • 1
  • 9
  • Thats excactly the answer! Thank you so much my man! Is there also any option to hide out my second navbar "navBarDark on page load or before the user can see it,which is currently shown when the "navBar" is hidden?:) – oli venöl Sep 20 '22 at 07:49
  • 1
    you are very welcome, there is also an eventlistener which you can use , it runs when the window is loaded, here is an answer which explains it . [link](https://stackoverflow.com/questions/4584373/difference-between-window-load-and-document-ready-functions) – Arash Seifi Sep 20 '22 at 08:07