How to set up a Sticky widget in Genesis

Did you know that it is possible to make any element sticky or fixed as it is scrolled to and have it “bottom out” so it never leaves its container (no more worrying about accidentally covering the footer) using CSS alone?

Thanks to Tim Jensen, today I learned about position: sticky which is quite powerful and easy. Bye bye Sticky-Kit.

Watch this 10-min screencast to learn how to arrive at the CSS:

While the tutorial has been written for Genesis Sample, it should work with a few adjustments in any Genesis theme.

Add the following in child theme’s style.css above the media queries:

@media only screen and (min-width: 1024px) {

    .content-sidebar-wrap {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .sidebar-primary .widget:last-child {
        position: -webkit-sticky;
        position: sticky;
        top: 40px;
    }

    .admin-bar .sidebar-primary .widget:last-child {
        top: 72px;
    }

}

to make the last widget in the Primary sidebar sticky.

Foodie Pro specific instructions can be found here.