jgresalfi
7/16/2016 - 8:58 PM

Sticky bar shadow snippets

/* 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...