Add useful options for sticky header

Feature Requests / Improvements
1

In oxygen builder their is some useful options for making beautiful header (video link is also added for reference)

For sticky header:
1- Scroll distance (px)
2- sticky background color
3- Sticky box shadow
4- fade in sticky

Not only this but some other options for container

Display sticky
Only show in sticky and hide in sticky

Display Overlay
Only show in overlay and hide in overlay.

Watch 2 min of below video from time 20:55 to 22:59

3 Likes
2

Totally agree!

Also, adding scroll classes to body would be better for we could use them to CSS-style other elements in the page (for instance floating navigation links on the side or scroll to top button visibility).

And finally, I personnally use BOTH scroll-down and scroll-up classes so that we can really differentiate the three header states: top / down / up.

Here is my version of sticky header:

JS:

window.addEventListener( 'DOMContentLoaded', ()=> {

	const	body = document.body,
		  	scrollUp = "scroll-up",
		  	scrollDown = "scroll-down",
		  	offset = 200,
		  	stickyHeaderHeight = document.querySelector(".main-header").clientHeight;
	let 	lastScroll = window.pageYOffset,
	        content = document.querySelector("main");
	        
	content.style.top = stickyHeaderHeight + "px";

    if ( lastScroll > offset ) {
		body.classList.add(scrollUp);
	}

	window.addEventListener('scroll', ()=> {

			const currentScroll = window.pageYOffset;
		    if ( currentScroll <= offset ) {
				body.classList.remove(scrollUp);
				return;
			}
			if ( currentScroll > lastScroll && !body.classList.contains(scrollDown) ) {
				body.classList.remove(scrollUp);
				body.classList.add(scrollDown);
			} else if ( currentScroll < lastScroll && !body.classList.contains(scrollUp) ) {
				body.classList.remove(scrollDown);
				body.classList.add(scrollUp);
			}
			lastScroll = currentScroll;

	});

});

CSS:

.sticky-header {
    position: fixed;
    z-index: 999;
    background-color: var(--header-bg);
    transition-property: background-color, box-shadow, transform;
    will-change: background-color, box-shadow, transform;
}
.scroll-down .sticky-header {
    transform: translateY(-100%);
}
.scroll-up .sticky-header {
	background-color: var(--sticky-header-bg);
	box-shadow: var(--header-shadow);
}
2 Likes