Sticky Header

Resolved Brandon
(@gunnabthe1)

1 year, 11 months ago

Trying to find a way to create a sticky header. The header seems to be defined by a class and not an ID so I’m having some trouble getting any custom CSS to work. Ideally, trying to achieve something like this: https://www.youtube.com/watch?v=WuWL_BNyhfU

Thanks for any help you can provide!

The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

(@putra1arya)

Hello @gunnabthe1,
If you need to add an id to the header.
You can add an html anchor using wordpress.
You can do it by grouping all direct children of the header.
Then add html anchor to the group.

gowinda

(@gowinda)

1 year, 11 months ago

you can add custom HTML block in your header and put this code:

<style>
    .custom-class{
        position: sticky; 
        top: 0px; 
        z-index: 999; 
    }
</style>

<script>
        var lastScrollTop = 0;
        window.addEventListener("scroll", function(){
                var header = document.querySelector("header");
        	var st = window.pageYOffset || document.documentElement.scrollTop;
                if (st > lastScrollTop) {
                        lastScrollTop = st;
                	header.classList.remove("custom-class");
                } else if (st < lastScrollTop) {
                        lastScrollTop = st;
                        header.classList.add("custom-class");
                }
        }, false);
</script>

add any custom css inside style.

Thread Starter

Brandon

(@gunnabthe1)

1 year, 11 months ago

This was super helpful! Thanks, @gowinda

gowinda

(@gowinda)

1 year, 11 months ago

you are welcome!

Viewing 4 replies - 1 through 4 (of 4 total)