透明导航条，滚动时可见

Transparent navbar to visible when scrolling

本文关键字：滚动 导航 透明      更新时间：2023-09-26

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

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

  1. 不透明度从0到100
  2. 导航条固定容器高度变小
  3. 颜色:# fff;就颜色:000;

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

猜它是javascript/jquery，在那里使用，我只知道HTML &CSS。谁能帮我做个类似的主题?

好吧，我给你点好处JSFiddle:

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

幻数警告:500是scrollTop的分划符，数字越小不透明度越快超过1(不透明度应该在0到1之间)。

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

希望这对你有帮助!

相关文章：