Sticky/Overlay header JS

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

const  header = document.querySelector('.header'),
             headerRow = document.querySelector('.header-row'),
             body = document.body
var checkOverlay = false // or true
// (getComputedStyle won't work in Edge, so set the value manually)getComputedStyle(document.documentElement).getPropertyValue ('--overlay-header')

//Check for scroll action

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

        var scrollDistance = 400,
// (getComputedStyle won't work in Edge, so set the value manually) getComputedStyle(document.documentElement).getPropertyValue ('--scroll-distance'),
            checkSticky = true //or false
//(getComputedStyle won't work in Edge, so set the value manually)  getComputedStyle(document.documentElement).getPropertyValue ('--sticky-header')

        //add class if scroll distance is less than windows scroll height & --sticky-header is true

        header.classList.toggle('sticky', window.scrollY > scrollDistance && checkSticky == 'true' )
        body.classList.toggle('has-sticky', window.scrollY > scrollDistance && checkSticky == 'true')

    })   //end scroll action





//Check if --overaly-header is set to true, add classes else remove classes

    if (checkOverlay == 'true') {
                header.classList.add('overlay')
                body.ClassList.add('has-overlay')
    } else{
                header.classList.remove('overlay')
                body.ClassList.remove('has-overlay')
    }



});