Question

所以我正在开发一个Ruby on Rails应用程序，其中给出了一个设计，它要求导航栏在页面顶部透明，然后在向下滚过一个certian {{{ 1}}在页面上，同时，导航栏链接文本在顶部为白色，并在同一<section>处淡化为灰色。

我已经研究过在滚动时改变不透明度的JavaScript，但是我没有成功地让它工作。我想，将导航栏淡入白色的相同功能也适用于导航栏链接渐变为灰色。

我也研究过.stix js [插件在Bootstrap上，但我不知道非常高级的javascript来修改它以满足我的需求。如果它有用，我应用程序视图中的导航栏结构将以：

开头

<section>

感谢任何和所有帮助！我真的很想让这个设计工作，而且我已经完成了大部分工作，这个特殊的部分让我难过。任何帮助表示赞赏！

Answer 1

这样的事情可能有所帮助：

window.addEventListener("scroll", function() {
    if (window.scrollY > 500) {
        $('.navbar').fadeOut();
    }
    else {
        $('.navbar').fadeIn();
    }
},false);

从顶部更换500个像素，就是你想要在fadeOut处进行。

Answer 2

更简单的解决方案是创建一个CSS类，然后在滚动条中添加/删除：

.navbar-fixed-top { background-color: rgba(255,255,255,1);transition: background-color 2s ease 0s;}
.navbar-fixed-top.opaque { background-color: rgba(255,255,255,0);transition: background-color 2s ease 0s;

}

使用Javascript：

$(window).scroll(function() {
    if($(this).scrollTop() > 300) {
        $('.navbar-fixed-top').addClass('opaque');
    } else {
        $('.navbar-fixed-top').removeClass('opaque');
    }
});

我们的网站也有类似的效果：www.kmo.com.au

Answer 3

这很棒。对于新手，对于不透明的类，我做了以下内容：

＆＃13;

.navbar-default {
  min-height: 120px;
  opacity: 0;
  transition: opacity .5s;
}
.opaque {
  opacity: 1;
  transition: opacity .5s;
}

＆＃13;

更改过渡属性下的淡入淡出时间。这对所有浏览器都不起作用，但它现在看起来很棒。

向下滚动淡化引导导航栏，同时更改文本颜色

3 个答案: