mercredi 27 janvier 2016

jQuery function triggered, although if condition is false

I have a problem with my script.

I ask Modernizr after a minimum width of 768px.

If the variable "query" returns true, then the functions "hideNav" and "showNav" be executed.

If my window width is below 768px, then returns the query variable false and the functions "hideNav" and "showNav" will not run. That's right.

BUT:The window width is more than 768px wide. I change the window size to less than 768px and the variable "query" returns false. Still correct. However, although the variable is false, the functions "hideNav" and "showNav" will continue to run when I scroll up and down. This should not be so!

I do not understand that...

    var hideNav = function() {
        console.log("Fire hideNav");
        $("[data-nav-status='toggle']").removeClass("is-visible").addClass("is-hidden");
    }

    var showNav = function() {
        console.log("Fire showNav");
        $("[data-nav-status='toggle']").removeClass("is-hidden").addClass("is-visible");
    }

    $(document).ready(function() {

        //**    viewport check

        $( window ).resize(function() {

          var query = Modernizr.mq('(min-width: 768px)');

            console.log("query is: "+query+".");

          if (query) {

                //**    Navigation Bar Show nn Scroll Up 
              var previousScroll = 0;

              $(window).scroll(function(){
                var currentScroll = $(this).scrollTop();
                //**    If the current scroll position is greater than 0 (the top) AND the current scroll position is less than the document height minus the window height (the bottom) run the navigation if/else statement.

                if (currentScroll > 0 && currentScroll < $(document).height() - $(window).height()){
                  //**  If the current scroll is greater than the previous scroll (i.e we're scrolling down the page), hide the nav.
                  if (currentScroll > previousScroll){
                    window.setTimeout(hideNav, 300);
                  //**  Else we are scrolling up (i.e the previous scroll is greater than the current scroll), so show the nav.
                  } else {
                    window.setTimeout(showNav, 300);    
                  }
                  //**  Set the previous scroll value equal to the current scroll.
                  previousScroll = currentScroll;
                }
                    if (currentScroll == 0){
                        console.log("top");
                    }
                console.log(currentScroll);

              });

          } else {

            //** other stuff coming soon...

          }
        }).resize();

    });

Aucun commentaire:

Enregistrer un commentaire