Fixed Widget and Sticky Elements for WordPress

描述

Use Fixed Widget to create sticky widgets, sticky blocks, 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.

Features

Fixed Widget is completely free of charge.

  • 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 floating 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
  • Written in plain JavaScript for better performance

兼容性

Theme requirements:

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

屏幕截图

  • 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

安装

  1. 跟随标准的WordPress插件安装过程
  2. 通过在WordPress中的插件菜单激活插件
  3. 去到外观 -> Widgets,启用”Fixed Widget” 选项在任意的激活的widget
  4. Fine tune plugin parameters on Appearance -> Fixed Widget page

常见问题

为什么Fixed Widget 插件无法工作?

这里有一些原因:

  1. 页面上的 Javascript 错误。通常由有问题的插件引起。检查浏览器的 javascript 控制台。如果发现错误,请尝试定位并修复其来源。
  2. 没有 wp_head() 以及 wp_footer()函数在模板. 检查 header.php 以及 footer.php 文件在你激活的主题中.
  3. 与其他插件和脚本发生冲突
  4. CSS 不兼容

有可能修复多个widgets吗?

是的,它有可能修复不止1个widget 甚至如果他们位置在不通的侧边.

How can I style a fixed element only while it is sticky?

Fixed elements carry the FixedWidget__fixed_widget__pinned class, which allows developers to change the styling only while the element is fixed.

如何防止与页脚重叠?

Go to WP admin area, Appearance -> Fixed Widget. 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.

怎么在移动端手机上禁用插件?

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.

评价

2022年6月24日
Error on saving the element, doesn't work
2022年6月7日
Unclear directions on how to use with the "stop element" and a few minutes of tinkering ended up with nothing working. I used WP Sticky Sidebar and it worked like a charm.
2022年4月26日
It 's easy to use and works really perfect for me. still has something to fix, it would be better if put 'Z-INDEX' in configuration.
2022年3月17日
Love this plugin! It's so simple, but its functionality is huge. Such a great replacement for pop-ups...or even just as an addition.
2022年3月14日
For me this plugin is very useful. The creator is doing a great job to keep it up to date and he is willing to solve upcoming issues individually. Thanks a lot!
阅读所有252条评价

贡献者及开发者

“Fixed Widget and Sticky Elements for WordPress” 是开源软件。 以下人员对此插件做出了贡献。

贡献者

“Fixed Widget and Sticky Elements for WordPress”插件已被翻译至22种本地话语言。 感谢所有译者为本插件所做的贡献。

将“Fixed Widget and Sticky Elements for WordPress”翻译成您的语言。

对开发感兴趣吗?

您可以浏览代码,查看SVN仓库,或通过RSS订阅开发日志

更新日志

6.1.0

  • Feature: Add the FixedWidget__fixed_widget__pinned class to the fixed widget while it is sticky and remove it when it is unfixed. This allows users to apply their own styling only during a fixed state.
  • Improvement: rename “Test new version” option into “Improved version” and changed the option description to make it more clear that both script versions will be kept.
  • Improvement: change “Fixed Widget Options” menu item into “Fixed Widget”
  • Improvement: Handle edge cases where the Minimum Width option doesn’t work for specific themes

6.0.7

  • Improvement: Compatibility with relative padding values

6.0.6

  • Improvement: Compatibility with dynamically loaded content pages, i.e., infinite scroll
  • Improvement: Compatibility with widgets that have large offsets
  • Fix: Prevent padding from increasing on scroll

6.0.5

  • Fix: Prevent overlapping of fixed widgets with non-fixed widgets when scrolling up

6.0.4

  • Fix: Prevent fixed widgets overlapping non-fixed elements in certain themes
  • Fix: Class selectors saved under the Custom Elements were wrongly prefixed with ‘#’

6.0.3

  • Improvement: Check lazy elements and stop elements for changing their size and recalculate fixed position
  • Improvement: Lower check interval from 1000 to 500 ms

6.0.2

  • Improvement: Fall back to previous version when the theme does not support the new script – mainly because of using float instead of flex
  • Improvement: Stop Elements work also when they are in a different column or sidebar than the fixed element
  • Improvement: Recalculate Fixed Widget height on scroll

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 “Improved version” under Appearance > Fixed Widget.

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

  • 修正了在使用Gutenberg插件用块编辑器编辑侧边栏时不保存的选项
  • 禁用脚本并且输出在AMP 页面中自从sticky widgets不是AMP 标准的一部分
  • 删除了显式翻译文件,因为所有翻译都是通过 https://translate.wordpress.org/projects/wp-plugins/q2w3-fixed-widget/ 处理的

5.2.0

  • 添加 q2w3-fixed-widget-sidebar-options 滤镜用于widget选项在前端.

5.1.9

  • 覅u徐 JavaScript 时间在某些设置中没有调用。

5.1.8

  • 修复了导致固定小部件跳跃/闪烁的 JavaScript 错误。

5.1.7

  • 修复“target.className.indexOf不是一个函数”的bug

5.1.6

  • 语言更正
  • 选项页面的清理

5.1.5

  • 作者改变

5.1.4

  • 添加filter到 “q2w3-fixed-widgets”,它允许filter的widgets数组作为固定

5.1.3

  • 现在与 WP Page Widget 插件兼容

5.1.2

  • 现在可以与 Shortcodes Ultimate 小部件配合使用!

5.1.1

  • 解决了 5.1 版本中的 Margin Bottom 和 Stop ID 的问题!

5.1

  • 新的选项加载方法!
  • 通过WordPress 4.9进行测试

5.0.4

  • Better WordPress Minify 插件的兼容性补丁。

5.0.3

  • 优化了对于”q2w3_sidebar_options is not defined” 错误的解决方案

5.0.2

  • 插件javascript优化
  • 使用 wp_add_inline_script 函数来解决“q2w3_sidebar_options 未定义”错误。此修复程序需要 WordPress 4.5!
  • Added option Disable MutationObserver. Use this option only as a backup to restore version 4 behavior!

5.0.1

  • 修复了多个侧边栏布局中的问题

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).
  • 改进了与缓存插件(W3TC、Autoptimize 等)的兼容性。无需从缓存中排除 jQuery 和插件文件!
  • Async/Defer script load method support
  • 添加了 Disable WidthDisable Height 选项
  • 缓存插件用户注意事项:升级到版本 5 后不要忘记清除缓存!选项格式已更改!

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
  • 更新国际化支持

4.0.6

  • A small bug fix
  • Added French translation

4.0.5

  • New option “Inherit widget width from the parent container” to better support responsive layouts.
  • Javascript optimization.

4.0.4

  • Added option “Auto fix widget id”. It is on by default. If the plugin is working with this option switched off – leave it in off position!

4.0.3

4.0.1

  • Hotfix! Removes problem with duplicated widget code.

4.0

  • Resolved widget jumping
  • Added code to automatically fix “widget id problem”
  • Added new compatibility option (plugin priority)
  • Added complete uninstall (uninstall script launched automatically when you DELETE plugin)
  • Added Spanish translation
  • Removed depricated options

3.0

  • This version brings you a long waited capability to stick widgets located in different sidebars! Enjoy!
  • Fixed conflict with WP Page Widget plugin
  • A few small bugs cleaned
  • Warning! “Disable plugin on mobile devices” and “Disable plugin on tablet devices” options now are depricated and will be removed in the next release. Use “Screen Max Width” option instead!

2.3

  • Now user can disable plugin, when browser window width is less then specified value (check plugin options).

2.2.4

  • This version compatible with jQuery 1.9 and 1.10

2.2.3

  • Little internal improvments
  • Mobile Detect updated to version 2.6.0

2.2.2

  • Fixed PHP Error
  • Mobile Detect updated to version 2.5.8

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).
  • 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.