Make div bigger than parent

The parent should not be positioned!!!!!!!

.child-div {

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)

Sites with JS exercises

Simple security tip for WordPress


That’s it folks

done looney tunes GIF

JointsWP + WooCommerce = Woojoo theme

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.

Woojoo demo

Looking for tutorial topics!

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!