使用滚动导航 js 引导导航栏不透明度

Question

我正在使用 scrolling-nav-js Scrolling nav 为填充设置动画并将导航栏固定到页面顶部，我想给导航栏一个微妙的不透明动画。如何添加过渡以更改不透明度属性？

我在 JS 和 CSS 文件中有以下代码：

//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");
    }
});

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

@media(min-width:767px) {
    .navbar {
        padding: 20px 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;
    }
}

Answer 1

没关系 :) 添加这个是完美的。

transition: background .5s ease-in-out,padding .5s ease-in-out, opacity .5s ease-in-out,opacity .5s ease-in-out;

和

.top-nav-collapse {
        padding: 0;
		opacity: 0.6;