滚动时透明导航栏可见

Question

我看到一个透明的主题导航栏，向下滚动时效果非常好。

以下是向下滚动时发生的事情。

1. 从0不透明度变为100
2. Navbar固定容器的高度变小。
3. 颜色：#FFF;变成颜色：000;

Here is direct link to demo page of that theme

猜测它是在那里使用的javascript / jquery，我只知道HTML＆amp; CSS。 任何人都可以帮助我让它像那个主题一样相似吗？

Answer 1

好的，我会在这里给你一块骨头JSFiddle：

$(document).on('scroll', function (e) {
    $('.navbar').css('opacity', ($(document).scrollTop() / 500));
});

幻数警报：500是scrollTop的分隔符，数字越低，不透明度越高于1（不透明度应介于0和1之间。

所以这段代码的作用是听取文档上的滚动并根据滚动位置设置导航栏的不透明度。

希望这有帮助！