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

当我向下滚动时，我的导航栏不会淡出并显示???因此，当用户向右滚动时，您希望它被修复和淡化吗？

只需添加位置：固定为.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

滚动

1 个答案: