CODEWITHSUNDEEP
javascriptjqueryhtmlcss
becca
becca

Reputation: 740

Faded header on scroll down - apply to scroll up as well

I have a header that fades from transparent to blue once you start scrolling. Once you reach the top of the page again the header returns to transparent.

But right now it just jumps back to being transparent. Might be obvious - but what can I do to make the blue fade nicely to transparent as well?

function checkScroll() {
    var startY = $('.navbar').height() * 1; //The point where the navbar changes in px

    if ($(window).scrollTop() > startY) {
        $('.navbar').addClass("navbar-inverse");
    } else {
        $('.navbar').removeClass("navbar-inverse");
    }
}

if ($('.navbar').length > 0) {
    $(window).on("scroll load resize", function () {
        checkScroll();
    });
}
body {
  height:1000px;
    }

.btn-gs {
    background: blue;
    border: 2px solid blue;
    padding: 5px 23px !important;
    border-radius: 25px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 25px;
    color: #fff !important;
    text-transform: uppercase;

}


.navbar-alt {
    height: 80px;
}

.navbar-brand-alt {
    padding: 0;
}

.navbar-signup {
    margin-top: 3px;
    margin-left: 10px;
}

.navbar-right-alt {
    position: static !important;
    padding-top: 20px !important;


    a {
        color: #fff !important;
        font-size: 16px !important;

        &:hover {
            color: darken(@brand-primary,10%) !important;
            background-color: transparent !important;
        }
    }
}

.navbar.navbar-inverse {
    background: transparent;
    transition: all .5s linear;
    border: none !important;
}

.navbar.navbar-inverse.scrolled {
    background: #32404E;
}
<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Title Page</title>
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
      	</head>
	<body>
    <div class="navbar navbar-alt navbar-fixed-top scrolled">
        <div class="row">
            <div class="col-md-offset-1 col-md-3">
                <div class="navbar-header">
                    <a href="@Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt">
                        <img src="#" />
                    </a>
                </div>
            </div>
            <div class="col-md-offset-2 col-md-5">
                <div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
                    <ul class="nav navbar-nav navbar-right navbar-signup">
                        <li>
                            <a href="#" class="btn-gs">
                                <i class="fa fa-phone"></i>
                                Contact Us
                            </a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right navbar-right-alt">
                        <li>
                            <a href="#">Back</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
                        


		<script src="http://code.jquery.com/jquery.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	</body>
</html>

Upvotes: 2

Views: 71

Answers (2)

Kld
Kld

Reputation: 7068

You can the jQueryUI animated addClass() removeClass();

function checkScroll() {
    var startY = $('.navbar').height() * 1; //The point where the navbar changes in px

    if ($(window).scrollTop() > startY) {
        $('.navbar').addClass("navbar-inverse", 1000, "easeInBack");
    } else {
        $('.navbar').removeClass("navbar-inverse", 1000, "easeInBack");
    }
}

if ($('.navbar').length > 0) {
    $(window).on("scroll load resize", function () {
        checkScroll();
    });
}
body {
  height:1000px;
    }

.btn-gs {
    background: blue;
    border: 2px solid blue;
    padding: 5px 23px !important;
    border-radius: 25px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 25px;
    color: #fff !important;
    text-transform: uppercase;

}


.navbar-alt {
    height: 80px;
}

.navbar-brand-alt {
    padding: 0;
}

.navbar-signup {
    margin-top: 3px;
    margin-left: 10px;
}

.navbar-right-alt {
    position: static !important;
    padding-top: 20px !important;


    a {
        color: #fff !important;
        font-size: 16px !important;

        &:hover {
            color: darken(@brand-primary,10%) !important;
            background-color: transparent !important;
        }
    }
}

.navbar.navbar-inverse {
    background: transparent; 
    border: none !important;
}

.navbar.navbar-inverse.scrolled {
    background: #32404E;
}
<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Title Page</title>
      
      <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 

      
      
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
      	</head>
	<body>
    <div class="navbar navbar-alt navbar-fixed-top scrolled">
        <div class="row">
            <div class="col-md-offset-1 col-md-3">
                <div class="navbar-header">
                    <a href="@Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt">
                        <img src="#" />
                    </a>
                </div>
            </div>
            <div class="col-md-offset-2 col-md-5">
                <div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
                    <ul class="nav navbar-nav navbar-right navbar-signup">
                        <li>
                            <a href="#" class="btn-gs">
                                <i class="fa fa-phone"></i>
                                Contact Us
                            </a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right navbar-right-alt">
                        <li>
                            <a href="#">Back</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
                        


		<script src="http://code.jquery.com/jquery.js"></script>
		<!-- Bootstrap JavaScript -->
            
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	</body>
</html>

Upvotes: 1

Jason Graham
Jason Graham

Reputation: 904

Looks like the problem here is that the CSS transition property is included in the class that you're adding/removing as you reach the top of the page ("navbar-inverse"). The transition will work when you add the class, but removing it will give the abrupt change in transparency you're seeing.

Instead, try putting the transition in a separate ".navbar" class, and removing it from "navbar-inverse", like so:

.navbar{
    transition: all .5s linear;
}


function checkScroll() {
    var startY = $('.navbar').height() * 1; //The point where the navbar changes in px

    if ($(window).scrollTop() > startY) {
        $('.navbar').addClass("navbar-inverse");
    } else {
        $('.navbar').removeClass("navbar-inverse");
    }
}

if ($('.navbar').length > 0) {
    $(window).on("scroll load resize", function () {
        checkScroll();
    });
}
body {
  height:1000px;
    }

.btn-gs {
    background: blue;
    border: 2px solid blue;
    padding: 5px 23px !important;
    border-radius: 25px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 25px;
    color: #fff !important;
    text-transform: uppercase;

}


.navbar-alt {
    height: 80px;
}

.navbar-brand-alt {
    padding: 0;
}

.navbar-signup {
    margin-top: 3px;
    margin-left: 10px;
}

.navbar-right-alt {
    position: static !important;
    padding-top: 20px !important;


    a {
        color: #fff !important;
        font-size: 16px !important;

        &:hover {
            color: darken(@brand-primary,10%) !important;
            background-color: transparent !important;
        }
    }
}

.navbar{
    transition: all .5s linear;
}

.navbar.navbar-inverse {
    background: transparent;
    border: none !important;
}

.navbar.navbar-inverse.scrolled {
    background: #32404E;
}
<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Title Page</title>
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
      	</head>
	<body>
    <div class="navbar navbar-alt navbar-fixed-top scrolled">
        <div class="row">
            <div class="col-md-offset-1 col-md-3">
                <div class="navbar-header">
                    <a href="@Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt">
                        <img src="#" />
                    </a>
                </div>
            </div>
            <div class="col-md-offset-2 col-md-5">
                <div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
                    <ul class="nav navbar-nav navbar-right navbar-signup">
                        <li>
                            <a href="#" class="btn-gs">
                                <i class="fa fa-phone"></i>
                                Contact Us
                            </a>
                        </li>
                    </ul>
                    <ul class="nav navbar-nav navbar-right navbar-right-alt">
                        <li>
                            <a href="#">Back</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
                        


		<script src="http://code.jquery.com/jquery.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	</body>
</html>

Upvotes: 1

Related Questions