javascript - CSS/Jquery Fade in background -

just wondering best way approach this. have nav menu white. when page scrolls down becomes sticky. when becomes sticky want background color fade white (let's say) blue.

i'm using jquery plugin "waypoints" , thought use toggle this, can't figure out want fade background not entire div (as cause menu titles fade)

any ideas?

here js

$('#megamenu-sticky-wrapper #megamenu.ubermenu-sticky').waypoint(function() {    $('#megamenu-sticky-wrapper #megamenu.ubermenu-sticky').toggleclass( 'animate' ); 

----what js when #megamenu-sticky-wrapper #megamenu.ubermenu-sticky reaches top of screen (becomes "sticky") toggle class .animate (this css go blue background, , animation stuff)

i've used animate keyframes. ex. specify keyframes , in class .animate include keyframe animation animate whenver part of page.

let me know if more info needed.

just looking guidance or direction how can target background fade in

thanks!

best way set background rgba() value, "a" alpha, or opacity.

.animate {     background: rgba(0, 0, 255, 0.4); } 

this isn't supported ie8, though.

edit: fade effect, add following css (here's fiddle):

#megamenu-sticky-wrapper #megamenu.ubermenu-sticky {     -webkit-transition: 0.5s ease;     -moz-transition: 0.5s ease;     -o-transition: 0.5s ease;     transition: 0.5s ease; }