.sp-sticky-logo { display:none; /* hide it from start */ } .sticky__wrapper { //top: 0; left: 0; right: 0; //-webkit-transform-origin: 50% 0%; //transform-origin: 50% 0%; //.transition(0.8s ease); } .sticky { .sticky__wrapper { top:0; position:fixed; -webkit-transform: translate3d(0,0,0); z-index:111; -webkit-animation-name:fade-in-down; animation-name:fade-in-down; -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; background-color: rgba(39,39,39,0.75); /* starting color */ .sp-sticky-logo { display:block; position:absolute; top:0; max-height:100%; padding:5px 0; width:auto; } .has-sticky-logo { display:none; } } .transparent-wrapper { position:absolute; z-index:9; left:0; right:0; margin:0 auto; } #cd-lateral-nav { min-height:100vh; } &.white, &.onepage { .sticky__wrapper { background-color: fade(white, 80%); /* starting color */ box-shadow:0 2px 6px fade(black, 10%); } } &.transparent { .sticky__wrapper { background: rgba(40,40,40,.8); /* starting color */ box-shadow:0 2px 6px fade(black, 10%); } } } // Header-In (3D) Effect @-webkit-keyframes header-in { 0%{ opacity:0; -webkit-transform:translate3d(0,-20px,0) scale(0.9) perspective(1200px) rotateX(-60deg); transform:translate3d(0,-20px,0) scale(0.9) perspective(1200px) rotateX(-60deg); } 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) scale(1) perspective(800px) rotateX(0deg); transform:translate3d(0,0,0) scale(1) perspective(800px) rotateX(0deg); } } @keyframes header-in { 0%{ opacity:0; -webkit-transform:translate3d(0,-20px,0) scale(0.9) perspective(1200px) rotateX(-60deg); transform:translate3d(0,-20px,0) scale(0.9) perspective(1200px) rotateX(-60deg); } 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) scale(1) perspective(800px) rotateX(0deg); transform:translate3d(0,0,0) scale(1) perspective(800px) rotateX(0deg); } } .header-in { -webkit-animation-name:header-in; animation-name:header-in; -webkit-transform-origin: 50% 0%; transform-origin: 50% 0%; //-webkit-backface-visibility: hidden; -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; }