/* If you have a sticky bar at the top of a webpage that's the same color as the page background, this will fade in a drop shadow below the bar to create a boundary on scroll */ | |
// jQuery | |
$(document).ready(function(){ | |
var a=$(".sticky-top-bar"); | |
$(window).scroll(function(){ | |
if($(document).scrollTop()>50){a.addClass("top-bar-shadow") | |
}else{a.removeClass("top-bar-shadow")}})}); | |
// CSS | |
.sticky-top-bar { | |
position: fixed; | |
z-index: 1; | |
height: 65px; | |
background-color: white; | |
.top-bar-shadow { | |
transition: box-shadow .5s ease; | |
box-shadow: rgba(0,0,0,0.701961) 0 0 5px; | |
} | |
// And that's all... |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment