CSS/Jquery Fade in background
Question
Just wondering what the best way to approach this. I have a nav menu that is white. When the page scrolls down it becomes sticky. When it becomes sticky I want the background color to fade from white to (let's say) blue.
I'm using the Jquery plugin "Waypoints" and thought I could use a toggle to do this, but can't figure it out as I only want to fade the background not the entire div (as that would cause the menu titles to also fade)
Any ideas?
Here is the JS
$('#megaMenu-sticky-wrapper #megaMenu.ubermenu-sticky').waypoint(function() {
$('#megaMenu-sticky-wrapper #megaMenu.ubermenu-sticky').toggleClass( 'animate' );
----What this JS does is when #megaMenu-sticky-wrapper #megaMenu.ubermenu-sticky reaches the top of the screen (becomes "sticky") it will toggle the class .animate (this is where the css will go for the blue background, and any animation stuff)
I've previously used this to animate with keyframes. Ex. specify the keyframes and then in the class .animate I would include the keyframe animation so that it would animate whenver I would get to a certain part of the page.
Let me know if any more info is needed.
Just looking for some guidance or direction into how I can target just the background for the fade in
Thanks!
2 answers
solution1
0 2014-01-31 20:32:35
Best way would be to set the background as an rgba() value, where the "a" is for the alpha , or opacity.
.animate {
background: rgba(0, 0, 255, 0.4);
}
This isn't supported by IE8, though.
EDIT: For the fade effect, add the following CSS (here's a Fiddle ):
#megaMenu-sticky-wrapper #megaMenu.ubermenu-sticky {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
solution2
0 2016-07-02 19:57:06
Check out this similar question . I copied my answer from that post over.
Use the transition property. Basically you set the transition property to the background color of the navigation class and give it a duration.
$(window).scroll(function() { if ($(this).scrollTop() > 200) { $('.navigation').css('background-color', 'blue'); } else { $('.navigation').css('background-color', 'red'); } });
.navigation{ height:1000px; background-color: black; transition:background-color 2s; }
<!DOCTYPE html> <html> <body> <nav class="navigation" id="nav"> <ul> <li><a href="#top" id="tp_link" class="active">Top</a></li> <li><a href="#item2" id="f_link">Item 2</a></li> <li><a href="#item3" id="s_link">Item 3</a></li> <li><a href="#item4" id="c_link">Item 4</a></li> <li><a href="#bottom" id="sm_link">Botton</a></li> </ul> </nav> </body> </html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.