The parent should not be positioned!!!!!!!
.child-div {
position:absolute;
left:0;
right:0;
}CategoryWeb_development
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)
BACKUP EVEYTHING!
That’s it folks
Fun project using JointsWP + WooCommerce, nothing fancy. JointsWP is a great starter theme that uses Zurb Foundation framework with WordPress. I added the code to make it compatible with WooCommerce, some styling and voila!
I start doing it for a client that wanted a ‘simple’ theme and decided to publish it here as well. If you use it you can check the documentation of
Plugins i am using are
Simple Social Icons really simple, does the job, great plugin
WooCommerce doh!
This is not a complete theme, but i will use it as a reference if i need to, you can do the same if you like.
Hey, if you have any idea about a topic, please send me an email.I have some ideas of my own but i am open to suggestions, thanks!
© 2021 Simplesteps for WordPress
Theme by Anders Norén — Up ↑