Title: Sticky Header Menu on Scroll Author: Jose Varghese Published: 19 juni 2026 Last modified: 26 juli 2026 --- Plugins zoeken ![](https://ps.w.org/menudoc-sticky-header-menu-on-scroll/assets/banner-772x250. png?rev=3579157) ![](https://ps.w.org/menudoc-sticky-header-menu-on-scroll/assets/icon-128x128.gif? rev=3579157) # Sticky Header Menu on Scroll Door [Jose Varghese](https://profiles.wordpress.org/josevarghese/) [Download](https://downloads.wordpress.org/plugin/menudoc-sticky-header-menu-on-scroll.1.0.2.zip) * [Details](https://nl.wordpress.org/plugins/menudoc-sticky-header-menu-on-scroll/#description) * [Beoordelingen](https://nl.wordpress.org/plugins/menudoc-sticky-header-menu-on-scroll/#reviews) * [Installatie](https://nl.wordpress.org/plugins/menudoc-sticky-header-menu-on-scroll/#installation) * [Ontwikkeling](https://nl.wordpress.org/plugins/menudoc-sticky-header-menu-on-scroll/#developers) [Ondersteuning](https://wordpress.org/support/plugin/menudoc-sticky-header-menu-on-scroll/) ## Beschrijving MenuDoc Sticky Header Menu on Scroll is a lightweight WordPress plugin that turns any theme’s header or navigation menu into a sticky element as soon as the user starts scrolling. It works out of the box with most themes thanks to smart auto- detection, and provides a full settings panel for fine-tuning every detail of the sticky behavior, appearance, and visibility rules. There is no need to touch any code. Install, activate, and the plugin immediately starts working on your site. #### Key Features **Smart Header Auto-Detection** The plugin scans your page for common header selectors and HTML structures used by popular WordPress themes, including full-site editing( FSE/block) themes. It checks for semantic roles, well-known CSS classes and IDs, and falls back gracefully to the outermost header tag or a nav element. In the vast majority of cases the correct element is found without any configuration. **Custom CSS Selector** If auto-detection selects the wrong element, you can switch to Custom Selector mode and enter any valid CSS selector (for example `.site-header`,`# masthead`, or `header.main-nav`) to target the exact element you want to stick. **Scroll Trigger Distance** Control how far the user must scroll down the page before the header becomes sticky. The default is 0 px, meaning the header sticks immediately. You can increase this value (up to 5000 px) so the header only sticks after the user has scrolled past the hero or page banner, keeping the top of the page clean. **Top Spacing (Sticky Offset)** Add extra pixel space between the very top of the viewport and the sticky header. This is useful when you want breathing room above the header or when other fixed elements occupy part of the top of the screen. **WordPress Admin Bar Awareness** When a user is logged in to WordPress, the admin toolbar appears at the top of the page and the sticky header automatically positions itself directly below it, with no overlap. This adjustment happens in real time and accounts for any height changes the admin bar makes at different screen widths. **Hide on Scroll Down** Enable this option to slide the sticky header out of view while the user is scrolling down the page. This reclaims screen real estate and gives readers more room to focus on content. When the user scrolls back up, the header smoothly returns to view. **Show on Scroll Up** Works together with Hide on Scroll Down. When enabled, the header reappears as soon as an upward scroll is detected. You can leave this off if you only want the header to return after the user scrolls all the way back to the top of the page. **Scroll-Up Distance Threshold** When Hide on Scroll Down and Show on Scroll Up are both active, this setting controls how many pixels upward the user must scroll before the header reappears. The default is 0 px, which means the header reappears instantly on any upward movement. Increasing this value (up to 300 px) prevents the header from flickering back into view when the user makes small, accidental upward movements at the bottom of a page. **Shrink on Scroll (Compact Mode)** When enabled, the sticky header automatically reduces its top and bottom padding as soon as it becomes sticky, giving it a slimmer, more modern look. A configurable Sticky Padding slider (0–50 px, default 8 px) lets you set exactly how much vertical padding the header should have while it is sticky. The transition between normal and compact size is animated using the same speed setting as other transitions. This is one of the most popular patterns in modern web design and requires no custom CSS. **Push-Up Element** Specify a CSS selector for an element (such as a footer or an in-page banner) that will push the sticky header out of view as it scrolls into the header’s position. This prevents the sticky header from overlapping important content near the bottom of the page. The push-up movement is calculated in real time based on the element’s position relative to the header. **Enter Animations** Choose an animation that plays once when the header first becomes sticky: – None: The header sticks instantly with no animation. – Fade In: The header fades in from transparent to fully visible. – Slide Down: The header slides in from above the viewport, which provides the most polished and natural feel for most sites. **Animation Speed** When an animation is selected, you can set the exact duration in milliseconds (from 0 to 1000 ms) to match the pace and personality of your site. **Drop Shadow** Adds a soft box-shadow beneath the sticky header to visually separate it from the page content below. The shadow color and opacity are both configurable so you can match your design exactly. The shadow transitions in smoothly as the header sticks. **Custom Sticky Background Color, Opacity, and Glassmorphism** If your header uses a transparent background when it is in its normal position, enabling this option lets you set a background color that is applied only when the header is sticky. A Background Opacity slider (0–100%) allows you to make the background semi-transparent rather than fully solid. A Backdrop Blur slider (0–20 px) adds a CSS `backdrop-filter: blur()` effect behind the header, creating the popular frosted-glass (glassmorphism) look. Combine a white background at around 85% opacity with 8–12 px of blur for a clean, modern glass-effect sticky header — no custom CSS required. **Responsive Breakpoint Control** Two independent width controls let you disable the sticky behavior at specific screen sizes: – Disable Below Width: Enter a pixel value and the sticky header will not activate on screens narrower than that width. Set to 0 to enable on all screen sizes. Useful if your mobile header uses a different layout or a hamburger menu that should not be sticky. – Disable Above Width: Enter a pixel value and the sticky header will not activate on screens wider than that value. Set to 0 to enable on all screen sizes. **Configurable Z-Index** Set the CSS z-index value for the sticky header directly from the settings page. The default is 1000, which works for most themes. If another plugin or theme element appears on top of your sticky header, increase this value until the header sits on top. **CSS State Classes** When enabled, the plugin adds the class `mshms-is-sticky` to the header element whenever it is in its sticky state, and `mshms-not-sticky` when it is not. These classes make it easy for developers and theme customizers to write CSS that targets each state independently, for example to change the logo size, font color, or padding when the header is sticky. **Display On (Page Type Control)** Choose exactly which types of pages the sticky header should be active on. The available options are: – Home Page – Blog / Posts Page – Posts (single post pages) – Pages (single page entries) – Archives (category, tag, date, and author archives) – Search Results – 404 Page – Attachments – Any public custom post types registered on your site **Debug Mode** Displays a small overlay on the frontend of your site showing the currently detected header element and its CSS selector path, and logs detailed messages to the browser console. Use this mode when setting up the plugin or troubleshooting detection issues. Turn it off before going live. **Reset to Defaults** A Reset to Defaults button on the settings page restores every option to its original out-of-the-box value in a single click. A confirmation prompt prevents accidental resets. This is useful when experimenting with settings and wanting to start fresh without manually adjusting each option. **No Coding Required** All settings are controlled from the WordPress admin panel under Settings – Sticky Header Menu. There is no need to edit any theme files, add custom code snippets, or write PHP. The plugin loads its scripts only on pages where the sticky header is enabled and only when the plugin itself is active. **Cache Compatibility** When you save settings the plugin automatically clears caches for the most popular WordPress caching solutions, including WP Rocket, LiteSpeed Cache, WP Super Cache, W3 Total Cache, WP Fastest Cache, Cache Enabler, Hummingbird, SiteGround Optimizer, Breeze, and FlyingPress. ## Schermafbeeldingen [⌊Frontend - Sticky header with slide-down animation active on the default WordPress theme Twenty Twenty Five, which is not having a sticky menu.⌉⌊Frontend - Sticky header with slide-down animation active on the default WordPress theme Twenty Twenty Five, which is not having a sticky menu.⌉[ Frontend – Sticky header with slide-down animation active on the default WordPress theme Twenty Twenty Five, which is not having a sticky menu. [⌊Settings page - Detection and behavior options.⌉⌊Settings page - Detection and behavior options.⌉[ Settings page – Detection and behavior options. [⌊Settings page - Appearance and animation options.⌉⌊Settings page - Appearance and animation options.⌉[ Settings page – Appearance and animation options. [⌊Settings page - Responsive and advanced options.⌉⌊Settings page - Responsive and advanced options.⌉[ Settings page – Responsive and advanced options. ## Installatie 1. Upload the `menudoc-sticky-header-menu-on-scroll` folder to the `/wp-content/plugins/` directory, or install the plugin directly from the WordPress plugin repository via Plugins – Add New. 2. Activate the plugin through the Plugins menu in WordPress. 3. Go to Settings – Sticky Header Menu to review and adjust the configuration. The plugin works with default settings for most themes. ## FAQ ### Will this work with my theme? Yes, in almost all cases. The plugin uses a prioritised list of selectors and HTML structures that covers the vast majority of WordPress themes, including classic themes, popular page builder themes, and full-site editing (block) themes built with the WordPress Site Editor. ### What if the wrong element becomes sticky? Switch the detection mode to Custom Selector and enter the CSS selector for your exact header element. You can find the correct selector by inspecting the header in your browser’s developer tools. ### Does the plugin add any front-end overhead when I disable it? No. When the plugin is disabled from the settings page, no CSS or JavaScript is loaded on the front end at all. ### Can I style the sticky header differently with CSS? Yes. Enable the CSS State Classes option and use `.mshms-is-sticky` in your custom CSS to target the header in its sticky state. You can apply any CSS property: different background, reduced padding, smaller logo via a child selector, and so on. ### Does it work with transparent headers? Yes. Enable the Custom Background option and choose a color. That color is applied only when the header becomes sticky, so the header can remain transparent at the top of the page and switch to a solid (or semi-transparent) background once the user scrolls. Use the Background Opacity and Backdrop Blur sliders for a frosted- glass effect. ### How do I create a frosted-glass sticky header? Enable Custom Background, set the background color to white (or your site’s primary color), reduce Background Opacity to around 80–90%, and set Backdrop Blur to 8–12 px. That produces a translucent, blurred header with no custom CSS required. Browser support for `backdrop-filter` is excellent in all modern browsers. ### How do I stop the header from flickering when I scroll up slightly? Enable Hide on Scroll Down and Show on Scroll Up, then set the Scroll-Up Distance Threshold to a value like 80–120 px. The header will only reappear after the user has scrolled upward by that many pixels, eliminating flicker caused by small accidental upward movements. ### Can I make the header smaller when it is sticky? Yes. Enable Shrink on Scroll in the Appearance card and use the Sticky Padding slider to set the desired padding when the header is sticky. The transition is smooth and animated. If you need to change font size or logo size in addition to padding, enable CSS State Classes and write a rule targeting `.mshms-is-sticky`. ## Beoordelingen ![](https://secure.gravatar.com/avatar/94e13b5bf9584492a07f1d6ff43310c55a6b8e23384caf7d15e3896dfe24fa80? s=60&d=retro&r=g) ### 󠀁[Simple, lightweight and works exactly as expected](https://wordpress.org/support/topic/simple-lightweight-and-works-exactly-as-expected-2/)󠁿 [Sid](https://profiles.wordpress.org/isildur00/) 25 juni 2026 1 reactie I was looking for a straightforward way to create a sticky header on scroll without adding unnecessary complexity, and this plugin delivered exactly that. It was easy to set up, works reliably, and does what it promises without affecting my site's performance. A great solution if you need a lightweight sticky header plugin. Thanks to the developer for creating and maintaining it! [ Lees alle 0 beoordelingen ](https://wordpress.org/support/plugin/menudoc-sticky-header-menu-on-scroll/reviews/) ## Bijdragers & ontwikkelaars “Sticky Header Menu on Scroll” is open source software. De volgende personen hebben bijgedragen aan deze plugin. Bijdragers * [ Jose Varghese ](https://profiles.wordpress.org/josevarghese/) [Vertaal “Sticky Header Menu on Scroll” in je eigen taal.](https://translate.wordpress.org/projects/wp-plugins/menudoc-sticky-header-menu-on-scroll) ### Interesse in ontwikkeling? [Bekijk de code](https://plugins.trac.wordpress.org/browser/menudoc-sticky-header-menu-on-scroll/), haal de [SVN repository](https://plugins.svn.wordpress.org/menudoc-sticky-header-menu-on-scroll/) op, of abonneer je op het [ontwikkellog](https://plugins.trac.wordpress.org/log/menudoc-sticky-header-menu-on-scroll/) via [RSS](https://plugins.trac.wordpress.org/log/menudoc-sticky-header-menu-on-scroll/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.0.2 * Fixed WordPress Plugin Check coding standards issues in the admin settings page: removed a UTF-8 byte order mark from the file, prefixed a global variable name, corrected placeholder ordering and translator comment placement in a translatable string, and ensured all dynamic output is properly escaped. #### 1.0.1 * Added Shrink on Scroll (Compact Mode): a new Appearance setting that reduces the header’s top and bottom padding when sticky, with a configurable Sticky Padding slider (0–50 px) and smooth animated transition. * Added Scroll-Up Distance Threshold: a new Behavior setting that requires the user to scroll upward by a configurable number of pixels (0–300 px) before the header reappears, preventing flicker when Hide on Scroll Down and Show on Scroll Up are both active. * Added Background Opacity slider (0–100%) to the Custom Background option, allowing semi-transparent sticky headers. * Added Backdrop Blur slider (0–20 px) to the Custom Background option, enabling a frosted-glass (glassmorphism) effect via CSS `backdrop-filter`. * Added Reset to Defaults button on the settings page that restores all options to their original values in a single click, with a confirmation prompt to prevent accidental resets. #### 1.0.0 * Initial release of MenuDoc Sticky Header Menu on Scroll. * Smart auto-detection of the header element using a prioritised selector list covering classic themes, page builder themes, and full-site editing block themes. * Custom CSS selector mode for manual header targeting when auto-detection is not suitable. * Scroll trigger distance setting to control how far the user must scroll before the header sticks. * Top spacing (sticky offset) setting to add pixel space between the top of the viewport and the sticky header. * WordPress admin bar awareness that automatically positions the sticky header below the admin toolbar on logged-in pages. * Hide on Scroll Down option that slides the header out of view while the user scrolls down, reclaiming screen space. * Show on Scroll Up option that brings the header back into view as soon as the user scrolls upward. * Push-Up Element feature that smoothly slides the sticky header out of view when a specified page element (such as a footer) scrolls into its area. * Three entry animations when the header first becomes sticky: None, Fade In, and Slide Down. * Configurable animation speed in milliseconds. * Drop Shadow option with configurable shadow color and opacity. * Custom Sticky Background Color option for themes that use a transparent header. * Responsive Disable Below Width control to turn off the sticky header on narrow screens. * Responsive Disable Above Width control to turn off the sticky header on wide screens. * Configurable z-index to control stacking order relative to other fixed elements. * CSS State Classes that add mshms-is-sticky and mshms-not-sticky to the header element for custom CSS targeting. * Debug Mode with a visual frontend overlay and browser console logging to assist with troubleshooting. * Display On controls to enable the sticky header per page type: Home Page, Blog Page, Posts, Pages, Archives, Search Results, 404 Page, Attachments, and custom post types. * Automatic cache clearing on settings save for WP Rocket, LiteSpeed Cache, WP Super Cache, W3 Total Cache, WP Fastest Cache, Cache Enabler, Hummingbird, SiteGround Optimizer, Breeze, and FlyingPress. * Zero front-end scripts or styles loaded when the plugin is disabled. ## Meta * Versie **1.0.2** * Laatst geüpdatet **3 maanden geleden** * Actieve installaties **30+** * WordPress versie ** 5.5 of nieuwer ** * Getest t/m **7.0.7** * PHP versie ** 7.4 of nieuwer ** * Taal * [English (US)](https://wordpress.org/plugins/menudoc-sticky-header-menu-on-scroll/) * Tags * [fixed header](https://nl.wordpress.org/plugins/tags/fixed-header/)[scroll header](https://nl.wordpress.org/plugins/tags/scroll-header/) [sticky header](https://nl.wordpress.org/plugins/tags/sticky-header/)[sticky menu](https://nl.wordpress.org/plugins/tags/sticky-menu/) [sticky navigation](https://nl.wordpress.org/plugins/tags/sticky-navigation/) * [Geavanceerde weergave](https://nl.wordpress.org/plugins/menudoc-sticky-header-menu-on-scroll/advanced/) ## Waarderingen 5 van 5 sterren. * [ 1 5 ster beoordeling ](https://wordpress.org/support/plugin/menudoc-sticky-header-menu-on-scroll/reviews/?filter=5) * [ 0 4 sterren beoordelingen ](https://wordpress.org/support/plugin/menudoc-sticky-header-menu-on-scroll/reviews/?filter=4) * [ 0 3 sterren beoordelingen ](https://wordpress.org/support/plugin/menudoc-sticky-header-menu-on-scroll/reviews/?filter=3) * [ 0 2 sterren beoordelingen ](https://wordpress.org/support/plugin/menudoc-sticky-header-menu-on-scroll/reviews/?filter=2) * [ 0 1 sterren beoordelingen ](https://wordpress.org/support/plugin/menudoc-sticky-header-menu-on-scroll/reviews/?filter=1) [Je beoordeling](https://wordpress.org/support/plugin/menudoc-sticky-header-menu-on-scroll/reviews/#new-post) [Bekijk alle beoordelingen](https://wordpress.org/support/plugin/menudoc-sticky-header-menu-on-scroll/reviews/) ## Bijdragers * [ Jose Varghese ](https://profiles.wordpress.org/josevarghese/) ## Ondersteuning Iets te melden? Hulp nodig? [Het supportforum bekijken](https://wordpress.org/support/plugin/menudoc-sticky-header-menu-on-scroll/)