如何设置div以在滚动时更改其背景和alpha级别

Question

我正在寻找网站为我的新启动主页的灵感。我看到https://www.pactcoffee.com/和他们的主页有一个完整的背景图像的标题和导航栏是透明的，然后它变成了一个纯色的导航栏，当你向下滚动。我只能够为网站设置CSS，但我不明白该怎么做才能改变导航栏的颜色。

Answer 1

你可以这样做…

http://jsfiddle.net/ojcqbLr2/

检查Fiddle以查看其余的代码…

这个JS会这样做。

$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
    $('.topMenu').fadeIn();
} else {
    $('.topMenu').fadeOut();
} });

顺便说一下，我通过搜索找到了这个信息。 在800px后显示div

我只是对代码进行了编辑，使其位于顶部而不是底部。

祝你好运。

Answer 2

我发现可以设置两个div。其中一个将显示为none。

$(document).scroll(function () {
var headerHeight = $('header').height(),
    s = $('.nav'),
    y = $(this).scrollTop();
if (y > headerHeight) {
    $('.navLong').fadeIn();
    $('.nav').fadeOut();
} else {
    $('.navLong').fadeOut();
    $('.nav').fadeIn();
}});

允许一个div出现时消失，反之亦然。可以在DEMO