Title: WP Stickit – Sticky Header, Menu, Sidebar & More Author: Nazmul Sabuz Published: 2016 年 2 月 16 日 Last modified: 2025 年 9 月 21 日 --- 搜尋外掛 ![](https://ps.w.org/wp-stickit/assets/banner-772x250.png?rev=3365844) ![](https://ps.w.org/wp-stickit/assets/icon-256x256.png?rev=3365358) # WP Stickit – Sticky Header, Menu, Sidebar & More 由 [Nazmul Sabuz](https://profiles.wordpress.org/nazsabuz/) 開發 [下載](https://downloads.wordpress.org/plugin/wp-stickit.1.4.0.zip) * [詳細資料](https://tw.wordpress.org/plugins/wp-stickit/#description) * [使用者評論](https://tw.wordpress.org/plugins/wp-stickit/#reviews) * [安裝方式](https://tw.wordpress.org/plugins/wp-stickit/#installation) * [開發資訊](https://tw.wordpress.org/plugins/wp-stickit/#developers) [技術支援](https://wordpress.org/support/plugin/wp-stickit/) ## 外掛說明 WP Stickit is a powerful WordPress plugin that makes any element on your website sticky with advanced customization options. Perfect for creating sticky headers, sidebars, navigation menus, or any other element you want to keep visible while users scroll. **Key Features:** * **Multiple Selectors**: Use CSS selectors (classes, IDs) or separate multiple selectors with commas * **Custom Positioning**: Set custom top offset for precise sticky positioning * **Z-Index Control**: Manage layering with customizable z-index values * **Responsive Design**: Set minimum and maximum screen widths for responsive behavior * **Lightweight**: Uses the efficient jQuery Stickit library * **Easy Setup**: Simple admin interface with clear instructions ## 安裝方式 **Automatic Installation (Recommended):** 1. Log in to your WordPress admin dashboard 2. Navigate to Plugins Add New 3. Search for “WP Stickit” 4. Click “Install Now” and then “Activate” **Manual Installation:** 1. Download the latest version of WP Stickit from the WordPress.org repository 2. Extract the zip file to get the `wp-stickit` folder 3. Upload the `wp-stickit` folder to your `/wp-content/plugins/` directory using FTP or your hosting control panel 4. Activate the plugin through the ‘Plugins’ menu in WordPress admin **Configuration:** 1. Go to Settings WP Stickit in your WordPress admin dashboard 2. Configure your sticky element settings: 3. * **Class Name**: Enter CSS selector(s) (e.g., `.sidebar`, `#header`, `.sidebar,. widget`) * **Top**: Set top offset in pixels (e.g., 50 for 50px from top) * **Z-Index**: Set layering value (default: 100) * **Screen Min Width**: Minimum screen width for sticky behavior (default: 1280px) * **Screen Max Width**: Maximum screen width for sticky behavior (default: 1920px) 4. Click “Save Changes” **Requirements:** * WordPress 5.0 or higher * Modern web browser with JavaScript enabled If you encounter any bugs or have comments or suggestions, please submit a ticket using the support forum. ## 常見問題集 ### Can I use multiple CSS selectors? Yes! You can use multiple selectors by separating them with commas. For example: *`. sidebar, .widget` – targets both sidebar and widget elements * `#header, .navigation`– targets both header ID and navigation class * `.sticky-element, #my-widget, .custom- sidebar` – targets multiple different elements ### My element isn’t becoming sticky. What should I check? 1. **Verify CSS Selector**: Make sure you’re using the correct CSS selector with proper syntax: 2. * Use `.` for classes (e.g., `.sidebar`) * Use `#` for IDs (e.g., `#header`) * Check your browser’s developer tools to confirm the element exists 3. **Check Screen Width**: Ensure your screen width is within the configured min/max width range 4. **Z-Index Conflicts**: Try increasing the z-index value if your sticky element appears behind other elements 5. **JavaScript Errors**: Check your browser console for any JavaScript errors that might prevent the plugin from working 6. **Theme Compatibility**: Some themes may have CSS that interferes with sticky positioning ### What’s the difference between Screen Min Width and Screen Max Width? These settings control when the sticky effect is active based on screen size: *** Screen Min Width**: Sticky effect only works on screens wider than this value (default: 1280px) * **Screen Max Width**: Sticky effect only works on screens narrower than this value (default: 1920px) This is useful for responsive design – you might want sticky elements only on desktop but not on mobile devices. ### Can I use this plugin with page builders? Yes! WP Stickit works with most page builders including Elementor, Gutenberg, Beaver Builder, and others. Just use the CSS class or ID that the page builder assigns to your element. ### Will this plugin slow down my website? No, WP Stickit is lightweight and optimized: * Uses the efficient jQuery Stickit library * Only loads on pages where it’s needed * Minimal JavaScript footprint * No external API calls or heavy processing ### How do I remove the sticky effect from an element? Simply remove the CSS selector from the “Class Name” field in the plugin settings, or deactivate the plugin entirely. ### Can I have different sticky settings for different elements? Currently, the plugin applies the same settings to all specified selectors. For different settings per element, you would need to configure them separately or use multiple instances of the plugin. ### Is this plugin compatible with caching plugins? Yes, WP Stickit is compatible with most caching plugins including WP Rocket, W3 Total Cache, and WP Super Cache. The plugin’s JavaScript will work regardless of cached HTML. ## 使用者評論 ![](https://secure.gravatar.com/avatar/01ae0c2112942fd6df6248dcbf1c9dc60c0bc5b40caa9e6773efa89fcb89861b? s=60&d=retro&r=g) ### 󠀁[Great Widget](https://wordpress.org/support/topic/great-widget-57/)󠁿 [valdesk](https://profiles.wordpress.org/valdesk/) 2017 年 5 月 19 日 Works great. ![](https://secure.gravatar.com/avatar/d8952f1bfdb285c3d330340086e6a91811665c469f1193a1daf5a440aeda9fe4? s=60&d=retro&r=g) ### 󠀁[Perfect!](https://wordpress.org/support/topic/perfect-3916/)󠁿 [hpatrick777](https://profiles.wordpress.org/hpatrick777/) 2017 年 4 月 2 日 Simple, easy, perfect! This is what I was looking for! Thank You! ![](https://secure.gravatar.com/avatar/016d3342309bd3860e35f5197e33a47016bf4f42aea735c106a76ae0d2e4a6aa? s=60&d=retro&r=g) ### 󠀁[Awesome](https://wordpress.org/support/topic/awesome-3832/)󠁿 [turkvar](https://profiles.wordpress.org/turkvar/) 2016 年 12 月 3 日 only many downloads and rating so I think it will not work , but it worked more than awesome .. thanks for the good work. ![](https://secure.gravatar.com/avatar/829ace5f9cd0474076c0ea9c7498ff4c7ad768fc168ddbca4b23dff0866da468? s=60&d=retro&r=g) ### 󠀁[it Works!!](https://wordpress.org/support/topic/it-works-929/)󠁿 [jaguattina](https://profiles.wordpress.org/jaguattina/) 2016 年 9 月 3 日 Simple and easy to use. It works perfectly! [ 閱讀全部 4 則使用者評論 ](https://wordpress.org/support/plugin/wp-stickit/reviews/) ## 參與者及開發者 以下人員參與了開源軟體〈WP Stickit – Sticky Header, Menu, Sidebar & More〉的開發 相關工作。 參與者 * [ Nazmul Sabuz ](https://profiles.wordpress.org/nazsabuz/) 〈WP Stickit – Sticky Header, Menu, Sidebar & More〉外掛目前已有 1 個本地化語言版本。 感謝[全部譯者](https://translate.wordpress.org/projects/wp-plugins/wp-stickit/contributors) 為這個外掛做出的貢獻。 [將〈WP Stickit – Sticky Header, Menu, Sidebar & More〉外掛本地化為台灣繁體中文版](https://translate.wordpress.org/projects/wp-plugins/wp-stickit) ### 對開發相關資訊感興趣？ 任何人均可[瀏覽程式碼](https://plugins.trac.wordpress.org/browser/wp-stickit/)、 查看 [SVN 存放庫](https://plugins.svn.wordpress.org/wp-stickit/)，或透過 [RSS](https://plugins.trac.wordpress.org/log/wp-stickit/?limit=100&mode=stop_on_copy&format=rss) 訂閱[開發記錄](https://plugins.trac.wordpress.org/log/wp-stickit/)。 ## 變更記錄 #### 1.4.0 * **Major Code Refactoring**: Complete rewrite following WordPress coding standards * **Enhanced Security**: Added input sanitization and validation for all form fields * **Improved Internationalization**: Full translation support with proper text domain * **Better User Experience**: Updated admin interface with clearer descriptions and help text * **Code Quality**: Added WordPress security checks, proper escaping, and documentation * **Multiple Selectors**: Enhanced support for comma-separated CSS selectors * **Modern Architecture**: Separated frontend and admin functionality into organized files * **WordPress Compatibility**: Updated for WordPress 6.8+ compatibility #### 1.3.1 * Updated compatibility. #### 1.3.0 * Updated to jQuery Stickit v0.2.14. * Fixed top offset problem #### 1.2.0 * Updated to jQuery Stickit v0.2.11. * Added some additional options. - Top - zIndex #### 1.1.0 * Updated to jQuery Stickit v0.2.1. * Fixed incorrect sticky position in some cases. #### 1.0.0 * Initial release. ## 中繼資料 * 版本 **1.4.0** * 最後更新 **8 個月前** * 啟用安裝數 **100+** * WordPress 版本需求 ** 5.0 或更新版本 ** * 已測試相容的 WordPress 版本 **6.8.5** * 語言 * [Dutch](https://nl.wordpress.org/plugins/wp-stickit/) 及 [English (US)](https://wordpress.org/plugins/wp-stickit/). * [將這個外掛本地化為你的母語版本](https://translate.wordpress.org/projects/wp-plugins/wp-stickit) * 標籤: * [floating menu](https://tw.wordpress.org/plugins/tags/floating-menu/)[sticky](https://tw.wordpress.org/plugins/tags/sticky/) [sticky header](https://tw.wordpress.org/plugins/tags/sticky-header/)[sticky menu](https://tw.wordpress.org/plugins/tags/sticky-menu/) [sticky sidebar](https://tw.wordpress.org/plugins/tags/sticky-sidebar/) * [進階檢視](https://tw.wordpress.org/plugins/wp-stickit/advanced/) ## 評分 5 星，滿分為 5 星 * [ 4 個 5 星使用者評論 ](https://wordpress.org/support/plugin/wp-stickit/reviews/?filter=5) * [ 0 個 4 星使用者評論 ](https://wordpress.org/support/plugin/wp-stickit/reviews/?filter=4) * [ 0 個 3 星使用者評論 ](https://wordpress.org/support/plugin/wp-stickit/reviews/?filter=3) * [ 0 個 2 星使用者評論 ](https://wordpress.org/support/plugin/wp-stickit/reviews/?filter=2) * [ 0 個 1 星使用者評論 ](https://wordpress.org/support/plugin/wp-stickit/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/wp-stickit/reviews/#new-post) [查看全部使用者評論](https://wordpress.org/support/plugin/wp-stickit/reviews/) ## 參與者 * [ Nazmul Sabuz ](https://profiles.wordpress.org/nazsabuz/) ## 技術支援 使用者可在技術支援論壇提出意見反應或使用問題。 [檢視技術支援論壇](https://wordpress.org/support/plugin/wp-stickit/)