Sticky Header

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");
  }
}