Simplesteps for WordPress

To make it sticky I used the offsetParent, offsetTop and scrollY properties. I placed the button in a positioned element ( not sticky ) hid it with opacity so I can animate it and get the offsetParent ( does not work with display:none; ) and then used scrollY to change it’s opacity. I added a class ‘.sticky-facetwp’ to the button to target it.

The CSS

button.sticky-facetwp {
	opacity: 0;
	position: absolute;
	z-index: 99;
	color:#000 !important;
	transition-property: opacity;
	transition-duration: 1s;
	transition-delay: 0s;
}

.archive button.fixed-sticky-facetwp {
	opacity: 1;
	position: fixed;
}	

The JS

const page = document.querySelector('#content')

// get the filter button
const theFilter = document.querySelector('.sticky-facetwp')
const theFilterTop = theFilter.offsetTop

function stickyfacetwp() {
	if (window.scrollY >= theFilterTop) {
        theFilter.classList.add('fixed-sticky-facetwp');
      } else {
        theFilter.classList.remove('fixed-sticky-facetwp');
      }
}

window.addEventListener('scroll', stickyfacetwp)