Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
/* 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