vendredi 31 juillet 2015

.mouseleave not working with "if" statement

I have a navigation menu.I want it to change the opacity to 1 when i hover the cursor over it then IF the page is scrolled down and mouse is no longer hovering over it decrease opacity to 0.5. I have this jQuery code :

  // JavaScript Document
jQuery(document).ready(function() {


  var navOffset = jQuery("nav").offset().top;

  jQuery(window).scroll(function() {

    var scrollPos = jQuery(window).scrollTop();

    if (scrollPos > navOffset) {
      jQuery("nav").stop(true);
      jQuery("nav").addClass("fixed");
      jQuery("nav").fadeTo(1000, 0.5);

    } else {
      jQuery("nav").stop(true);
      jQuery("nav").removeClass("fixed");
      jQuery("nav").fadeTo(1000, 1.0);
    }

   });

   $("nav").mouseenter(function(){
       jQuery("nav").stop(true);
      jQuery("nav").fadeTo(1000,1.0);  
     });


  jQuery("nav").mouseleave(function(){
      if (scrollPos > navOffset) {
       jQuery(this).stop(true);
       jQuery(this).fadeTo(1000,0.5);
      }
      });

});

And this CSS code :

.fixed { 
position:fixed;
top:0;
}

When i hover the mouse it works but when i no longer hover over it and my page is scrolled down, wont return to his opacity.Thank you for any help that you can give.

Aucun commentaire:

Enregistrer un commentaire