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 the tab or anywhere else outside the panel or submitting a form placed inside the panel will smoothly slide collapse/close the panel in.
Sample Screenshots:
when SUBSCRIBE is clicked:
Screencast:
On smaller screen widths, we shall hide the vertical tab and make the panel appear at the bottom, below the footer.
Step 1
Create a file named say, side-sticky.js in your child theme's js directory having the following code:
