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所在的位置）将去蓝色背景，以及任何动画的东西）

我以前用它来设置关键帧动画。防爆。指定关键帧然后在类.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;
}

Answer 2

查看类似的question。我从帖子中复制了answer。

使用过渡属性。基本上，您将过渡属性设置为导航类的背景颜色，并为其指定持续时间。

$(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>

CSS / Jquery在背景中淡出

2 个答案: