Code for Sticky Widget

A member asked this question via the members support form today:

Any thoughts on what would be a clean (least impact on performance) way to make a widget (ninja form) sticky in the primary sidebar of AgentPress Pro?

I have read some posts on how this can be done with plugins / javascript, but maybe it can be done without?

This tutorial contains 2 different solutions which produce 2 different effects.

The 1st code snippet produces exactly what you see in the 1st video below. It enables you to make any widget you add to any sidebar, sticky, so the widget floats down and always stays on screen giving it maximum exposure.

Both code snippets work in any WordPress themes.

Video Demo 1

The 2nd code snippet uses position: fixed so your widget doesn’t float up and down like the 1st solution.

Watch the following video to see the difference. Tested on the Genesis Sample child theme by StudioPress.

Video Demo 2

Solution 1 Usage

The can make several changes to the sticky widget. The 1st change is needed so the code works with your widget. The 2nd change is used only if you want to change the top padding. The 3rd change enables you to disable the code at a specific screen width.

1. In the code, change the default widget class var $sidebar = $(".enews-widget"), which i used for testing from .enews-widget to your widgets class.
2. In the code, change the value for the topPadding = 35; argument from 35 to anything you like.
3. In the code, change the value for the screen width if($(window).width() > 1140) { from 1140 to any other value you want to disable the jQuery code from working

Code Installation

You can use the code in a parent theme, child theme or plugin.

Here’s the installation instructions for logged in members: