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