Skip to content

Instantly share code, notes, and snippets.

@jgresalfi
Last active July 19, 2016 02:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jgresalfi/205c5811811bd000e489e9044aa102b3 to your computer and use it in GitHub Desktop.
Save jgresalfi/205c5811811bd000e489e9044aa102b3 to your computer and use it in GitHub Desktop.
/* 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