CODEWITHSUNDEEP
javascriptjqueryhtml
Manav Jagani
Manav Jagani

Reputation: 1

On scroll up navbar background fadeout

I want my navbar background to be fadeout, when scroll up. URL - http://wcsdedesign.com/play-brow-bar/index.php

When i scroll down the page the background of the navbar changes to pink color with fadeIn effect. I want the same when i scroll up the page, but the background need to have a fadeout effect. How can i do the same as scroll-up? Please suggest asap. Below is my script code.

    <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>

Upvotes: 0

Views: 556

Answers (2)

Sajib Biswas
Sajib Biswas

Reputation: 463

What I understand is when you scroll down, the nav area change its bg-color from white to pink with a fade in effect. But when you again scroll to top, the bg-color suddenly changed back to white without fading effect.

You can achieve what you are trying with CSS transition property. Add the following code in your CSS file.

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

What the above code does is, when the background-color changes, the transition will take .9s time.

Upvotes: 0

Hardik Solanki
Hardik Solanki

Reputation: 325

Use this script:

$(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/

Upvotes: 0

Related Questions