Fixed Widget and Sticky Elements for WordPress

Omschrijving

Use Fixed Widget to create sticky widgets and other elements that stay in the visible screen area when a user scrolls the page up or down.

Sticky widgets are more visible than unfixed widgets and therefore have a significantly higher click-through rate.

That’s why this option is worthwhile for ads or other elements that visitors should interact with. Meanwhile, Google also allows the integration of sticky AdSense ads.

Changes in version 6.0.0

Version 6.0.0 is a full rewrite of the frontend script. It fixes many edge cases like jumping, reloading, or resizing widgets.
The rewrite also resolves bad Cumulative Layout Shifts.

Enable “Test new version” under Appearance > Fixed Widget Options.

  • the frontend script does not need jQuery anymore
  • removed unneeded options that previously helped resolving edge cases
  • “Stop Elements” and “Custom Fixed Elements” now accept any selector, including IDs, Class, and Type selectors.
  • works with the widget block editor introduced in WordPress 5.8
  • added “stop” option to widget blocks

Please test and let us know if you discover any issues.

Features

All the features are free.

  • Sticky Widgets Use the Fixed Widget option on any widget and blocks in the sidebar
  • Sticky Elements Choose any element on your site and make it sticky
  • Margin Top allows you to stop sticky elements to cover sticky menu bars
  • Margin Bottom pushes sticky elements up before they reach a certain distance towards the bottom window
  • Stop Elements push sticky elements up when they are scrolling into view
  • Stop Blocks defines blocks in your sidebar that push fixed blocks out of the page
  • Minimum Screen Width and Minimum Screen Height allow you to disable sticky behavior on small screens

Compatibility

Theme requirements:

  • wp_head() and wp_footer() functions in header.php and footer.php files
  • JavaScript errors could break sticky widgets

Schermafdrukken

  • A fixed widget and a stop widget in action
  • Fixed Widget plugin options
  • Fixed Widget options for blocks in the widget editor
  • Fixed Widget option for legacy widgets

Installatie

  1. Volg de standaard installatieprocedure voor WordPress plugins
  2. Activeer de plugin via het menu plugins in WordPress
  3. Go to Appearance -> Widgets, enable the “Fixed Widget” option on any active widget
  4. Fine tune plugin parameters on Appearance -> Fixed Widget Options page

FAQ

Why is the Fixed Widget plugin not working?

There are several reasons:

  1. Javascript errors on the page. Commonly caused by buggy plugins. Check javascript console of your browser. If you find errors, try to locate and fix its source.
  2. No wp_head() and wp_footer() functions in template. Check header.php and footer.php files of your active theme.
  3. Conflicts with other plugins and scripts
  4. CSS incompatibility

Is it possible to fix multiple widgets?

Yes, it is possible to fix more than one widget even if they are located in different sidebars.

How to prevent overlapping with the footer?

Go to WP admin area, Appearance -> Fixed Widget Options. Here you can define the top and bottom margins. Set bottom margin value >= footer height. Check the result, please.
If your footer height is changing from page to page it is better to use the Stop ID option. Here you need to 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 Element Selectors option I need to enter #colophon.

Hoe de plugin op mobiele apparaten uit te schakelen?

Use the options Minimum Screen Width and Minimum Screen Height to disable sticky features when the browser window is too small. You can also use the visitor conditions of Advanced Ads to target specific devices.

Beoordelingen

11 januari 2022
We can only fix selective widgets. Not all widgets. I want just 1 widget to be sticky, and there is no option for it. For me, this plugin is simply waste of space. I hope you update it in the next version
1 november 2021
Thomas and Max, the plugin authors, were very responsive and quick to fix an issue when I brought it to their attention. It's great when developers support their plugins and the people who utilize them. Thank you both very much! Review of version 6.0.0-beta-2 While using: WordPress 5.8.1 WooCommerce 5.8.0 Astra (theme) 3.7.4
3 september 2021
I used this plugin and I am very satisfied. I used it in the sidebar section of my website, it worked flawlessly and it looked very nice. Thanks. I recommend this plugin to everyone.
Lees alle 245 beoordelingen

Bijdragers & ontwikkelaars

“Fixed Widget and Sticky Elements for WordPress” is open source software. De volgende personen hebben bijgedragen aan deze plugin.

Bijdragers

“Fixed Widget and Sticky Elements for WordPress” is vertaald in 21 talen. Dank voor de vertalers voor hun bijdragen.

Vertaal “Fixed Widget and Sticky Elements for WordPress” naar jouw taal.

Interesse in ontwikkeling?

Bekijk de code, haal de SVN repository op, of abonneer je op het ontwikkellog via RSS.

Changelog

6.0.1

  • Fix: use the previous Stop ID value in the new Stop Elements section

6.0.0

Version 6.0.0 is a full rewrite of the frontend script. It fixes many edge cases like jumping, reloading, or resizing widgets.
The rewrite also resolves bad Cumulative Layout Shifts.

Most changes are available when you enable “Test new version” under Appearance > Fixed Widget Options.

Please test and let us know if you discover any issues.

  • added new (and optional) script version that uses position: sticky instead of position: fixed
  • the frontend script does not need jQuery anymore
  • removed unneeded options that previously helped resolving edge cases
  • “Stop Elements” and “Custom Fixed Elements” now accept any selector, including IDs, Class, and Type selectors.
  • fixed blocks in sidebars as introduced in WordPress 5.8
  • define stop blocks in sidebars that move up fixed blocks on scrolling
  • improved option descriptions on the admin page
  • improved behavior for elements higher than the screen – they first stick at the top and scroll to the bottom later
  • removed duplicating widget code

5.3.0

  • fixed option not saving when using the Gutenberg plugin to edit sidebars with block editor
  • disabled scripts and output on AMP pages since sticky widgets are not part of the AMP standard
  • removed explicit translation files since all translations are handled through https://translate.wordpress.org/projects/wp-plugins/q2w3-fixed-widget/

5.2.0

  • Added q2w3-fixed-widget-sidebar-options filter for widget options in the frontend.

5.1.9

  • Fixed JavaScript events which were not called in some setups.

5.1.8

  • Fixed JavaScript bug that caused jumping / flickering of fixed widgets.

5.1.7

  • Fixed “a.target.className.indexOf is not a function” bug

5.1.6

  • linguistic corrections
  • cleanup of the options page

5.1.5

  • author change

5.1.4

  • Added filter “q2w3-fixed-widgets”. It allows to filter array of widgets marked as fixed.

5.1.3

  • Now compatible with WP Page Widget plugin

5.1.2

  • Now works fine with Shortcodes Ultimate widgets!

5.1.1

  • Resolves problems with Margin Bottom and Stop ID from version 5.1!

5.1

  • New options load method!
  • Tested with WordPress 4.9

5.0.4

  • Compatibility patch for Better WordPress Minify plugin.

5.0.3

  • Improved solution for “q2w3_sidebar_options is not defined” error.

5.0.2

  • Plugin javascript optimization
  • To resolve “q2w3_sidebar_options is not defined” error wp_add_inline_script function is used. WordPress 4.5 required for this fix!
  • Added option Disable MutationObserver. Use this option only as a backup to restore version 4 behavior!

5.0.1

  • Fixed problem in multiple sidebars layout

5.0

  • Optimized client side performance. Detection of page changes is now based on MutationObserver API. Widget parameters recount is fired only when needed! Refresh interval option used only for campatibility with old browsers (no MutationObserver API support).
  • Improved compatibility with caching plugins (W3TC, Autoptimize and etc.). No need to exclude jQuery and plugin files from cache!
  • Async/Defer script load method support
  • Added Disable Width and Disable Height options
  • Note for cache plugins users: don’t forget to clear cache after upgrading to version 5! Options format has been changed!

4.1

  • Added Stop ID option. Use it when you cannot specify Margin Bottom value. Solution provided by Julian_Kingman!
  • Now the plugin is aware of the WordPress admin bar presence!
  • Fixed destruction of jQuery(window).load hook. There should be no problems with other jQuery plugins now!
  • Added German translation
  • Updated internationalization support

4.0.6

  • Een kleine bugfix
  • Franse vertaling toegevoegd

4.0.5

  • Nieuwe optie “Widget breedte overnemen van de hoofd container” om responsive lay-outs beter te ondersteunen.
  • Javascript optimalisatie.

4.0.4

  • Optie “Auto fix widget id” toegevoegd. Het is standaard ingeschakeld. Als de plugin werkt met deze optie uitgeschakeld, laat deze dan in de uit-stand!

4.0.3

4.0.1

  • Hotfix! Lost het probleem op met gedupliceerde widget code.

4.0

  • Opgelost widget springen
  • Code toegevoegd om automatisch ‘widget id probleem’ op te lossen
  • Nieuwe compatibiliteitsoptie toegevoegd (prioriteit plugin)
  • Volledige de-installatie toegevoegd (verwijderingsscript wordt automatisch gestart wanneer je de DELETE plugin gebruikt)
  • Spaanse vertaling toegevoegd
  • Verouderde opties verwijderd

3.0

  • Deze versie biedt je een langverwachte mogelijkheid om widgets in verschillende zijbalken te plakken! Genieten!
  • Conflict opgelost met de plugin WP pagina widget
  • Een paar kleine bugs opgeruimd
  • Waarschuwing! “Schakel plugin op mobiele apparaten uit” en “Schakel plugin op tabletapparaten uit” zijn nu niet meer beschikbaar en zullen in de volgende release worden verwijderd. Gebruik in plaats daarvan de optie “Max. Schermbreedte”!

2.3

  • Nu kan de gebruiker de plugin uitschakelen als de breedte van het browservenster kleiner is dan de opgegeven waarde (controleer de plugin opties).

2.2.4

  • Deze versie is compatibel met jQuery 1.9 en 1.1 0

2.2.3

  • Kleine interne verbeteringen
  • Mobile Detect geüpdatet naar versie 2.6.0

2.2.2

2.2.1

2.2

  • Now the plugin is able to reflect dynamic page content changes (infinite scroll, ajax basket and other javascript stuff)!!!
  • Added new option to plugin settings: Refresh interval. Recommended values between 500 – 2000 milliseconds. Note: setting have impact on the site performance (client side). If you don’t have dynamic content, set Refresh interval = 0.
  • Mobile Detect class updated to version 2.5.7

2.1

  • New option to define custom widget IDs for static sidebars and etc.
  • New option to disable plugin on mobile devices.
  • Fixed javascript error when no sidebars exists on a page.

2.0

  • Fixed footer overlapping problem! Now users can customize top and bottom margins for the fixed widgets from the admin area (Appearance -> Fixed Widget Options).
  • Added localization support

1.0.3

  • Normalized plugin behavior when sidebar is longer then main content. Note: possible overlapping with footer is still exists.

1.0.2

  • Fixed problem with widgets displayed only on certain pages.
  • Optimized javascript code.

1.0.1

  • Improved compatibility with Webkit based browsers (like Chrome and Safari).
  • Removed unnecessary CSS.

1.0

  • First public release.