lisamiltonbayer
8/15/2017 - 12:23 PM

CSS - On scroll fade in navigation background

CSS - On scroll fade in navigation background

Original code: 
https://codepen.io/willpaige/pen/zeqHd

// Dark Scroll
// -----------------------------------

.ds-show {
  background: rgba(black, 0.7) !important;
}

.ds-transition {    
  -webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
}
$(window).scroll(function () {
    // 100 = The point you would like to fade the nav in.

    if ($(window).scrollTop() > 350) {

        $('.ds-transition').addClass('ds-show');

    }
    else {

        $('.ds-transition').removeClass('ds-show');

    };
});
<!-- Add ds-transition class to navbar-inverse div -->
<nav class="navbar navbar-inverse navbar-fixed-top col-md-12 ds-transition">