向上滚动导航栏背景淡出

Question

我希望我的导航栏背景在向上滚动时淡出。URL-http://wcsdedesign.com/play-brow-bar/index.php

当我向下滚动页面时，导航栏的背景会变为粉红色，并具有fadeIn效果。当我向上滚动页面时，我想要相同的效果，但背景需要有淡出效果。我怎样才能做与向上滚动相同的操作？请尽快提出建议。下面是我的脚本代码。

    <nav class="navbar navbar-inverse navbar-fixed-top row ">
        <div class="container">
            <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>                        
            </button>
            <a class="navbar-brand" href="index.php"><img src="images/logo.png"></a><br>
            <span class="scroll-bg mob-phne glyphicon fa fa-phone cnt-num" style="font-size:20px !important;  margin-top: 10px; left: -4%;     color: #000;">&nbsp;03 9041 6582</span>
            </div><!--navbar-header-->
            <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li class="menus"><a class="scroll-bg" href="index.php">Home</a></li>
                <li class="menus"><a class="scroll-bg" href="services.php">Services</a></li>
                <li class="menus"><a class="scroll-bg" href="#">Gallery</a></li>
                <li class="menus"><a class="scroll-bg" href="about-us.php">About Us</a></li>
                <li class="menus"><a class="scroll-bg" href="contact.php">Our Locations</a></li>
                <li class="menus"><a class="scroll-bg" href="#">Book Now!</a></li>
                <li class="menus"><a class="scroll-bg" href="specials.php">Specials</a></li>
                <li class="menus"><a class="scroll-bg" href="blog.php">Blog</a></li>
             </ul>
             <ul class="nav navbar-nav social-icons-header">
                <li><a class="scroll-bg" href="#"><span class="glyphicon fa fa-facebook"></span></a></li>
                <li><a class="scroll-bg" href="#"><span class="glyphicon fa fa-twitter"></span></a></li>
                <li><a class="scroll-bg" href="#"><span class="glyphicon fa fa-instagram"></span></a></li>
                <li><a class="scroll-bg" href="#"><span class="glyphicon fa fa-envelope"></span></a></li>
            </ul>
            </div>
            </div><!--cointainer-->
    </nav><!--navigation-->

<script type="text/javascript">
  var navbarVisible = false;
  $(window).scroll(function(){
        if ($(this).scrollTop() >= 1) {
           $(".navbar-fixed-top").css("background-color", "#cc2c96");
                if (!navbarVisible) {
                        $("nav").addClass("navbar-fixed-top")
                        .hide()
                        .fadeTo(900, 0.9);
                        navbarVisible = true;};
            } else {
             $(".navbar-fixed-top").css("background-color", "transparent");
             $("nav").addClass("navbar-fixed-top");
                navbarVisible = `false; }`
             });
</script>

Answer 1

使用此脚本：

$(document).ready(function() {
            // grab the initial top offset of the navigation 
            var stickyNavTop = $('.nav').offset().top;
            // our function that decides weather the navigation bar should have "fixed" css position or not.
            var stickyNav = function(){
                var scrollTop = $(window).scrollTop(); // our current vertical position from the top
                // if we've scrolled more than the navigation, change its position to fixed to stick to top,
                // otherwise change it back to relative
                if (scrollTop > stickyNavTop) { 
                    $('.nav').addClass('sticky');
                } else {
                    $('.nav').removeClass('sticky'); 
                }
            };
            stickyNav();
            // and run it again every time you scroll
            $(window).scroll(function() {
                stickyNav();
            });
});

https://jsfiddle.net/hardyrajput/uf0626jb/3/

Answer 2

我所理解的是，当你向下滚动时，导航区域的背景颜色从白色变为粉红色，并具有渐变效果。但当你再次滚动到顶部时，bg颜色突然变回白色，没有褪色的效果。

您可以使用CSS transition属性来实现您正在尝试的内容。在CSS文件中添加以下代码。

.navbar-fixed-top{
    transition: background-color .9s;
}

上面的代码所做的是，当background-color发生变化时，转换将花费.9s的时间。