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。

如何逐步将引导导航栏的背景不透明度转换为纯色

1 个答案: