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