javascript - CSS/Jquery 在后台淡入淡出

Question

只是想知道解决这个问题的最佳方法是什么。我有一个白色的导航菜单。当页面向下滚动时，它会变粘。当它变得粘稠时，我希望背景颜色从白色逐渐变为(比方说)蓝色。

我正在使用 Jquery 插件“Waypoints”并认为我可以使用切换来执行此操作，但无法弄清楚，因为我只想淡化背景而不是整个 div(因为这会导致菜单标题也会褪色)

有什么想法吗？

这是JS

$('#megaMenu-sticky-wrapper #megaMenu.ubermenu-sticky').waypoint(function() {
   $('#megaMenu-sticky-wrapper #megaMenu.ubermenu-sticky').toggleClass( 'animate' );

----这个 JS 所做的是当#megaMenu-sticky-wrapper #megaMenu.ubermenu-sticky 到达屏幕顶部(变成“粘性”)时它会切换类 .animate(这是 css将选择蓝色背景和任何动画 Material )

我以前用它来制作关键帧动画。前任。指定关键帧，然后在 .animate 类中我将包含关键帧动画，以便在我到达页面的特定部分时它会进行动画处理。

如果需要更多信息，请告诉我。

只是在寻找一些指导或方向，以了解如何仅针对背景进行淡入

谢谢!

Answer 1

最好的方法是将背景设置为 rgba() 值，其中“a”代表 alpha 或不透明度。

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

不过 IE8 不支持。

编辑:对于淡入淡出效果，添加以下 CSS(这里是 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;
}