Question

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

当我向下滚动页面时，导航栏的背景会变为粉红色，并带有淡入淡出效果。当我向上滚动页面时我想要相同，但背景需要有淡出效果。我如何做同样的向上滚动？请尽快建议。下面是我的脚本代码。

    <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颜色从白色变为粉红色，并具有淡入效果。但当你再次滚动到顶部时，bg颜色突然变回白色而没有褪色效果。

您可以使用CSS transition属性来实现您的目标。在CSS文件中添加以下代码。

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

上述代码的作用是，当background-color发生变化时，过渡将花费.9s时间。

在向上滚动导航栏背景淡出

2 个答案: