透明导航栏在滚动时可见 [英] Transparent navbar to visible when scrolling

问题描述

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

I saw an transparent theme navbar that have really nice effect when scrolling down.

向下卷动时会发生什么。

Here is what happends when scrolling down.

1. 到100


2. 导航栏固定容器高度变小。


3. 颜色：#fff;成为color：000;

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

猜测它是javascript / jquery在那里使用，我只知道HTML & CSS。
任何人都可以帮助我做类似的主题吗？

Guessing it is javascript/jquery that is used there and i know only HTML & CSS. Could anyone help me make it similar like in that theme?

推荐答案

好吧，我要给你bone here JSFiddle ：

Ok, I'm gonna throw you a bone here JSFiddle:

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

魔法数字提醒：500是scrollTop的分隔符，数字越小，不透明度越快高于1（不透明度应介于0和1之间。

Magic number alert: 500 is the divider for the scrollTop, the lower the number the faster the opacity goes above 1 (opacity should be between 0 and 1.

因此，此代码的作用是监听文档上的滚动并根据滚动位置设置导航条的不透明度。

So what this code does is listen to scrolling on the document and set the opacity of the navbar according to the scroll position.

希望这有助于！

这篇关于透明导航栏在滚动时可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！