1. Simple Sticky Header
CSS
.sticky { position: fixed !important; top: 0; width: 100%; -webkit-box-shadow: 0 4px 12px 0 rgb(0 0 0 / 5%); box-shadow:0 4px 12px 0 rgb(0 0 0 / 5%); }
JS
window.onscroll = function() {myFunction()}; var header = document.getElementById("site-header"); var sticky = header.offsetTop; function myFunction() { if (window.pageYOffset > sticky) { header.classList.add("sticky"); } else { header.classList.remove("sticky"); } }
2. Advance Sticky header with light and dark logo replace effect
CSS
#site-header{ transition: all .5s; } .sticky { position: fixed !important; top: 0; width: 100%; -webkit-box-shadow: 0 4px 12px 0 rgb(0 0 0 / 5%); box-shadow:0 4px 12px 0 rgb(0 0 0 / 5%); background-color: #fff !important; transition: all .5s; } .sticky #site-navigation-wrap .dropdown-menu >li >a{ color:#000; } .sticky .oceanwp-mobile-menu-icon a{ color:#000; } .sticky #site-header-inner { padding-top: 0px; transition: all .5s; } #site-header-inner{ transition: all .5s; } .sticky .custom-logo-link { background-image: url('https://sitesurface.com'); background-repeat: no-repeat; background-size: 100%; display: block; position: relative; max-width:200px; } .sticky .custom-logo{ opacity:0; }
Js
window.onscroll = function() {myFunction()}; var header = document.getElementById("site-header"); var sticky = header.offsetTop; function myFunction() { if (window.pageYOffset > sticky) { header.classList.add("sticky"); } else { header.classList.remove("sticky"); } }