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.

The sticky element in this example is going to be an opt-in form widget powered by the Genesis eNews Extended plugin.

Screenshots:

After scrolling past the bottom sticky element:

Screencast (showing a text widget in the Fixed Footer widget area):

Overview of the steps:

• Enqueue i.e., load ScrollToFixed in WordPress only on desktops and on the site's front page
• Register Fixed Footer widget area
• Display the Fixed Footer widget area above Footer widgets only on front page and if the widget area has been populated. We are going to display the widget area on all devices.
• Drag a Genesis eNews Extended plugin's widget into the Fixed Footer widget area and do styling including taking care of mobile responsiveness.

Step 1

Upload jquery-scrolltofixed-min.js to child theme's js directory.

Step 2

Create a file named say, non-handhelds.js in child theme's js directory having the following: