Fixed Widget for WordPress

On the settings page, you can find two options to disable fixed widgets on mobile devices: “Disable Width” and “Disable Height”. Both work similarly. If the browser width or height is less then or equals a specified value, the sticky function will be disabled. In the same vein, you can also use the display and visitor conditions of Advanced Ads to target specific user groups with your fixed widget.

Yes, it is possible to stop the sticky behavior at a specific point. You have to know the ID of this HTML element. The fixed widget will stop being sticky at the beginning of this element. To learn how to get this ID, let’s take a look at a simple HTML page structure in WordPress:

<div class="content">
  <div class="article"></div>
  <div class="sidebar">
    <div class="q2w3-fixed-widget"></div>
  </div>
  <div id="comments" class="comments-section"></div>
</div>

If you want to unfix the widget when it reaches the comment section, you will need to identify the ID of the comments block. Take a look at the page structure above, it is “comments” (id=”comments”). Copy this ID and paste it into the “Stop ID” field in the plugin settings. You can use any existing HTML element for it or you create your own in your theme.

The most common cause of the widget not being fixed is that the widgets are missing an ID attribute. If it doesn’t help to enable the “Auto fix widget ID” checkbox, that you can find in the plugin settings, you need to manually fix it or you ask your theme developer for help.

You can start here: Find the function “register_sidebar” (usually in the theme’s functions.php) and change the “before_widget” parameter.

Your original version may look like this:

register_sidebar( array(
	...
        'before_widget' => '<li class="widget widget-sidebar">',
	...
) );

It needs to get modified like this

register_sidebar( array(
        ...
	'before_widget' => '<li id="%1$s" class="widget widget-sidebar">',
	...
) );

Navigate to your WordPress dashboard and open the Fixed Widget options (Appearance > Fixed Widget Options). Here you can define the top and bottom margins. Set the bottom margin value greater or equal footer height.

If your footer height is changing from page to page it is better to use the “Stop ID” option and provide the HTML tag ID. The position of that HTML element will determine the margin-bottom value. For example, let’s take the Twenty Sixteen default theme. The theme’s footer container has an id=”colophon”. In the “Stop ID” option field, you just need to insert “colophon” without any other symbols!

When the plugin is already working and your widget is fixed, but you notice some glitches like jumping, overlapping, or misplacement, check your CSS files. The source of almost all jumping issues is the rule applied to the widget’s container:

position: relative;

Replace it by using

position: static;

To fix this, please, try to enable/disable the “Use jQuery(window).load() hook” option.

Check your CSS files for these two CSS rules:

• webkit-backface-visibility:hidden;
• webkit-transform: translate3d(0,0,0);

If you found them, disable them and check the result.