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 […]
sticky
How to setup sticky elements on scroll in WordPress using Stickybits
In the past, I’ve written about using Sticky-Kit to stick elements as they are scrolled past. In this tutorial I show how Stickybits can be used for the same, specifically to make the primary nav sticky for screen widths > 1023px in Genesis Sample. While the tutorial has been written for Genesis Sample, it should […]
Sticky Side Section in Genesis
Update on March 26, 2017: Added steps for positioning the sticky at the right edge of the browser. This tutorial provides the steps to display a vertical tab to the left side of browser edge in Genesis which when clicked, will slide out a side panel having widget(s) of a custom widget area. Clicking on […]
Using ScrollToFixed for a sticky bottom widget in Genesis
In the past I wrote how a fixed bottom section can be added in Genesis here. In this article I show how ScrollToFixed jQuery script can be used to make an element fixed on page load but becomes unstuck or static as it is scrolled to and scrolls up with the rest of the page. […]
Using Sticky-Kit to make Header, Navigation or other elements sticky in Genesis
Sticky-kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible. Let’s take a look at how we can use Sticky-Kit to make webpage elements remain persistent as the user scrolls past them. While there are several similar jQuery scripts out there the nice […]
How to implement jQuery Stick ’em in WordPress
jQuery Stick ’em is a jQuery plugin for making content sticky/fixed/persistent after the user has scrolled past the element. It has parameters for defining the item that should be made sticky, container that the sticky item to be contained in, offset and start values. In this article I show how jQuery Stick ’em can be […]
How to display one Sticky post on homepage in Genesis
To view the full content, please sign up for the membership. Already a member? Log in below or here.
How to remove Post Date from Sticky posts in Genesis
To view the full content, please sign up for the membership. Already a member? Log in below or here.
How to fade in last sidebar widget as it is scrolled to and make it fixed in Genesis
Andrea asked, @srikat Any chance of a tutorial? Client wants bottom sidebar widget to fade in and stick like on Pat Flynn’s blog: http://t.co/5leVweR1zI— Andrea Whitmer (@awhitmer83) January 30, 2014 In this post I am going to share a way of doing this using Waypoints, Animate.CSS and StickyJS. Here’s the overall flow: Opacity of the […]
Using Waypoints Sticky Elements to fix elements to top of page upon scrolling in WordPress
In the past I showed elements like header and navigation can be made to stick to top of page when the user scrolls past using jQuery script and jQuery.Pin. In this article I show how jQuery Waypoints Sticky Elements shortcut can be used to do the same. Upload waypoints.min.js and waypoints-sticky.min.js to child theme directory/js. […]
Recent Comments