Fade In/fade Out Navigation Bar
I'm trying to set my navigation bar to remain fixed and fade to 0.8 opacity when i scroll down and return to his normal position and opacity when i scroll back up. my jquery code i
Solution 1:
I think the problem is that you're setting the fadeTo function on every firing of the scroll event. Thus, when you scroll down, you're adding many "fade out" calls to the animation effects queue. When you scroll back up, all of the "fade out" effects (each of which takes 1.5 seconds) have to finish before the first "fade in" call takes place.
You can fix this by adding a call to jQuery's .stop(true) so that each scroll event clears the animation queue:
jQuery(document).ready(function() {
var navOffset = jQuery("nav").offset().top;
jQuery(window).scroll(function() {
var scrollPos = jQuery(window).scrollTop();
jQuery("nav").stop(true);
if (scrollPos > navOffset) {
jQuery("nav").addClass("fixed");
jQuery("nav").fadeTo(1500, 0.5);
} else {
jQuery("nav").removeClass("fixed");
jQuery("nav").fadeTo(1500, 1.0);
}
});
});body {
height: 4096px;
padding-top: 32px;
}
nav {
height: 128px;
width: 100%;
border: 1px solid black;
background-color: #00aa00;
}
.fixed {
position: fixed;
top: 0;
}<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><!DOCTYPE html><html><head><title>so</title><metacharset="UTF-8"></head><body><nav></nav></body></html>Note that this means the fadeTo animation won't take place until the user stops scrolling.
Solution 2:
It's there another solution to do that? Because when i scroll back up the time that it takes for the "fadeTo" action is verry delayed(~4 secconds) i dont think that's normal.
Post a Comment for "Fade In/fade Out Navigation Bar"