Linux 软件免费装

在这里免费安装WordPress以及其他软件

Banner图

Sticky Menu & Sticky Header

开发者 WebFactory
更新时间 2026年4月16日 03:35
PHP版本: 5.2 及以上
WordPress版本: 7.0
版权: GPLv2 or later
版权网址: 版权信息

标签

sticky sticky header sticky menu floating menu sticky widget

下载

1.1.1 1.1.2 1.1.3 1.1.4 1.2 1.2.1 1.3 1.3.1 2.0.1 2.2 2.21 2.22 2.23 2.25 2.28 2.29 2.31 2.0 2.30 2.1 2.1.1 1.1 1.0 2.34 2.32 2.33 2.35

详情介绍:

The WP Sticky Menu (or Sticky Header) On Scroll plugin allows you to make any element on your pages "sticky" as soon as it hits the top of the page when you scroll down. Although this is commonly used to keep menus at the top of your page to create floating menus, the plugin allows you to make any element sticky. Make a sticky header, stick menu, sticky widget (fixed widget), sticky logo, sticky call to action or a floating menu. You just need to know how to pick the right selector for the element you want to make sticky, and you need to be sure it's a unique selector. Sometimes a simple selector like "nav", "#main-menu", ".menu-main-menu-1" is enough. Other times you will have to be more detailed and use a more specific selector such as "header > ul:first-child" or "nav.top .menu-header ul.main". If you don't like messing with any code check out out the visual element picker in WP Sticky PRO. 产品特点 Having problems with SSL? Moving a site from HTTP to HTTPS? Install our free WP Force SSL plugin. It’s a great way to fix all SSL problems. GDPR compatibility We are not lawyers. Please do not take any of the following as legal advice. Sticky does not track, collect or process any user data on the front end or in the admin. Nothing is logged or pushed to any 3rd parties. We also don't use any 3rd party services or CDNs. Based on that, we feel it's GDPR compatible, but again, please, don't take this as legal advice.

安装:

  1. Upload the "sticky-menu-or-anything" directory to your "wp-content/plugins" directory.
  2. In your WordPress admin, go to PLUGINS and activate "Sticky Menu (or Anything!)"
  3. Go to SETTINGS - STICKY MENU (OR ANYTHING!)
  4. Pick the element you want to make sticky
  5. Party!

屏幕截图:

  • Advanced Sticky Menu Settings screen

升级注意事项:

2.1.1
  • Bug fixes
2.1
  • Functionality for targeting sticky/non-sticky class names added
2.0.1
  • A few small bug fixes
2.0
  • Bug fixes and new/better method of making elements sticky
1.4
  • Couple of bug fixes
1.3.1
  • Minor bug fix for push-up element
1.3
  • BY POPULAR DEMAND: functionalities added related to Administrator Toolbar and element that can push sticky element up
1.2.4
  • Minor bugfix
1.2.3
  • Bugfixes, improvements and translation-ready
1.2
  • Dynamic Mode added
1.1.4
  • Bugfixes, ready for WordPress 4.1 (and TwentyFifteen)
1.1.3
  • Bugfix for new bug introduced in 1.1.2
1.1.2
  • Bugfixes
1.1.1
  • Bugfixes
1.1
  • Added functionality (minimum and/or maximum screen size)
1.0
  • Initial release of the plugin

常见问题:

I selected a class/ID in the settings screen, but the element doesn't stick when I scroll down. Why not?

= Can I make multiple elements sticky? Sure, WP Sticky PRO has that option. You can make as many elements sticky as you like and configure settings individually for each element. First, make sure that if you select the element by its class name, it is preceded by a dot (e.g. ".main-menu"), and if you select it by its ID, that it's preceded by a pound/hash/number sign (e.g. "#main-menu"). Also, make sure there is only ONE element on the page with the selector you're using. If there is none, or more than one element that matches your selector, nothing will happen.

Once the element becomes sticky, it's not positioned/sized properly at all.

Due to the nature of CSS, there are situations where an element will not stick properly, usually if it has specific properties that are used to manipulate its location and/or dimensions. If your sticky element has any of the following properties, this could cause conflicts:

  • negative margins
  • absolute positioning
  • top/left/bottom/right properties
  • "display: inline"
  • "!important" applied to any of its properties
Try to avoid all this where possible, but if you can't, using the plugin in Legacy Mode (see below) helps sometimes. Another situation that can cause trouble, is when any parent of your sticky element has the "transform" CSS property applied to it. = Once the element becomes sticky, it's not responsive and doesn't resize when I change the browser size. This is a known (and annoying) bug in the plugin that I haven't been able to solve properly yet. For some sites (when the element does not contain any JavaScript interactivity, usually), it sometimes helps to use the plugin in Legacy Mode (see below). = Is it possible to add some styles to the element but only when it's sticky? To add styles to your sticky element when it's not sticky, use class name ".element-is-not-sticky". To add styles to your sticky element only when it's sticky, use class name ".element-is-sticky" The following code would give your element a red background only when it's not sticky, and blue only when it is: .element-is-not-sticky { background: red; } .element-is-sticky { background: blue; }

Once the element becomes sticky, there's a brief moment where you see it twice.

If you're using the plugin in Legacy Mode (see below), this happens when the sticky element (or any of its contents) has a CSS transition applied to it. Because the original element becomes invisible (and a cloned copy of it becomes visible), the visible-to-invisible status change will take place with a transition (ie. not instantly). Either remove any of the transitions the element has, or try disabling the Legacy Mode.

Still doesn't work. What could be wrong?

Check the "Debug Mode" checkbox in the plugin's settings. Reload the page and you may see errors in your browser's console window. If you've used a selector that doesn't exist, OR there are more of them on the page, you will be notified of that in the console.

Is it possible to have multiple sticky elements?

The current version only allows one sticky element, but this functionality will be implemented in the next major version. No expected release date, though.

How can I report security bugs?

You can report security bugs through the Patchstack Vulnerability Disclosure Program. The Patchstack team help validate, triage and handle any security vulnerabilities. Report a security vulnerability.

更新日志:

2.35 2.34 2.33 2.32 2.31 2.30 2.29 2.28 2.25 2.23 2.22 2.21 2.2 2.1.1 2.1 2.0.1 2.0 1.4 1.3.1 1.3 1.2.4 1.2.3 1.2 1.1.4 1.1.3 1.1.2 1.1.1 1.1 1.0