Sticky FacetWP flyout menu

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.


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) {
      } else {

window.addEventListener('scroll', stickyfacetwp)

offsetHeight of image equals zero

Scripts without async , defer or type="module" attributes, as well as inline scripts, are fetched and executed immediately, before the browser continues to parse the page.

To get the offsetHeight when using an inline script you can use an event listener like

window.addEventListener(‘load’, start);

load to wait for all assets OR link the script with ‘src’

<script src=”app.js”></script>

to load it after the assets loaded.