css - 如何逐渐将引导导航栏的背景不透明度变成纯色

Question

我试图理解的效果用在 Start Bootstrap Grayscale Template 中.

这是一个 bootstrap 3.0 实现。当您向下滚动时，导航区域会快速但平滑地改变其颜色。我想将这个很棒的功能加入到 yamm 的大型菜单中。 http://geedmo.github.io/yamm/

但在我这样做之前，我必须理解整体思路。有人可以阐明这一点吗？

处理导航区域的样式如下；

.navbar {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,.3);
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    background-color: #000;
}

.navbar-brand {
    font-weight: 700;
}

.navbar-brand:focus {
    outline: 0;
}

.navbar-custom a {
    color: #fff;
}

.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,.2);
}

.navbar-toggle {
    padding: 4px 6px;
    font-size: 16px;
    color: #fff;
}

.navbar-toggle:focus,
.navbar-toggle:active {
    outline: 0;
}

@media(min-width:767px) {
    .navbar {
        padding: 20px 0;
        border-bottom: 0;
        letter-spacing: 1px;
        background: 0 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
        background-color: #000;
    }

    .navbar-custom.top-nav-collapse {
        border-bottom: 1px solid rgba(255,255,255,.3);
    }
}

我很想知道是哪些部分造成了这种效果。

Answer 1

不一定是您要查找的内容，但您可以尝试类似 fiddle 中的内容.如果您在向下滚动时查看控制台，您将看到与顶部的距离随着它的变化而变化。您可以只检查距离，然后简单地更改菜单的类别。

JS 会是这样的:

$(window).scroll(function(){
    var posTop = $(window).scrollTop() - $('.container').offset().top
    console.log('from .container: '+posTop+' | from top of page: '+$(window).scrollTop());
}).trigger('scroll');

编辑:您编辑了问题并使其更具体，我的回答并不真正适用于您现在的问题。

稍后编辑:正如我所建议的，效果似乎是由 JavaScript 完成的。如果您查看 greyscale.js，您会发现:

//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

在文件的最顶部。基本上它说每当用户滚动时，它会检查它是否比顶部低 50px。如果有，它会将 nav 的类更改为 top-nav-collapse。然而，平滑效果来自 CSS。