Sticky Header

  • Resolved Brandon

    (@gunnabthe1)


    6 months, 3 weeks 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)

  • 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.

    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)

    This was super helpful! Thanks, @gowinda

    you are welcome!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Sticky Header’ is closed to new replies.