向下滚动时淡出 bootstrap 导航栏

Question

我正在以本网站为指导练习网页设计http://www.montere.it/?lang=en。

到目前为止，我设法将徽标和导航栏放在中间，徽标位于导航栏的顶部，但问题是当我向下滚动时，我的导航栏没有淡出和显示。

这是我试过的。请帮忙。

Css

body {
    height: 3000px;
    background: red;
}

.navbar-fixed-top {
    background-color: black;
    transition: background-color 2s ease 0s;
}

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

.navbar {
    position: relative;
}
.navbar-brand {
    position: absolute;
    left: 50%;
    margin-left: -50px;
    display: block;
}

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
    padding-top: 40px;
}

.navbar-right {
    position: relative;
    bottom: 35px;
    display: block;
}

Js

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

https://jsfiddle.net/esranj00/

Answer 1

当我向下滚动时，我的导航栏没有淡出显示？？？因此，您希望它在用户向右滚动时固定并淡出吗？

只需将 position:fixed 添加到 .navbar-fixed-top.opaque 并将背景颜色 rgba（第 4 个值）上的 0 更改为 0 到 1 之间的值。我为你选择了 .5

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

if($(this).scrollTop() > 0) {

如果您不想等待，也可以将其更改为 0

向下滚动时淡出 bootstrap 导航栏

Fading bootstrap navbar on scrolldown

html

javascript

css

navbar