sticky operations in javascript 1

sticky operations in javascript

var siteHeader = document.getElementById('siteHeader'),
    siteNav = document.getElementById('siteNav');

    window.onscroll = function() {
        if ( siteNav.offsetTop < document.documentElement.scrollTop + 26 || siteNav.offsetTop < document.body.scrollTop + 26) {
            siteHeader.setAttribute("class","sticky");
        }
        else {
            siteHeader.setAttribute("class","");
        }
    }

Here is what the above code is Doing:
1. We're getting the siteHeader and siteNav elements from the DOM.
2. We're adding an event listener to the window object that listens for the scroll event.
3. When the scroll event is triggered, we're checking to see if the siteNav element is scrolled past the top of the viewport.
4. If the siteNav element is scrolled past the top of the viewport, we're adding the sticky class to the siteHeader element.
5. If the siteNav element is not scrolled past the top of the viewport, we're removing the sticky class from the siteHeader element.

Similar Posts