滚动时可见的透明导航栏答案

【问题标题】：Transparent navbar to visible when scrolling滚动时可见的透明导航栏
【发布时间】：2014-07-24 00:24:04
【问题描述】：

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

这是向下滚动时发生的情况。

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

【问题讨论】：

链接到一个示例很好，但您也应该研究各种方法，尝试一种方法，然后询问您在实施时遇到的具体问题。
嗨，欢迎来到 Stack Overflow。通常在这里，如果您自己编写代码，您将获得更多帮助，然后在遇到特定问题时寻求帮助。所以...自己尝试一下，如果遇到困难，请编辑您的问题并添加到目前为止的代码。

【解决方案1】：

好的，我要在这里扔你一根骨头JSFiddle：

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

魔术数字警报：500 是 scrollTop 的分隔符，数字越小，不透明度超过 1 的速度越快（不透明度应该在 0 和 1 之间。

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

希望这会有所帮助！

【讨论】：