滚动时透明导航栏可见

Question

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

这是向下滚动时发生的事情.

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

这是该主题演示页面的直接链接

猜测它是javascript/jquery在那里使用,我只知道HTML和CSS.谁能帮助我让它像那个主题一样？

Answer 1

好的,我要给你一个骨头JSFiddle:

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

幻数警报:500是scrollTop的分隔符,数字越低,不透明度越高于1(不透明度应介于0和1之间.

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

希望这可以帮助!