Sticky

Creating sticky elements for example a header, a footer, or any other element on your website has never been easier.

The Sticky module implements the Sticky JS library and lets you make any element stay visible on scroll, configured entirely through the UI.

Requirements

• Drupal 11 or 12
• The Sticky JS library (garand/sticky) - installed automatically via Composer (see below)

Installation (recommended, via Composer)

The Sticky JS library is not on Packagist, so add this package definition to the repositories section of your project's root composer.json:

{
    "type": "package",
    "package": {
        "name": "garand/sticky",
        "version": "1.0.4",
        "type": "drupal-library",
        "license": "MIT",
        "dist": {
            "type": "zip",
            "url": "https://github.com/garand/sticky/archive/refs/tags/1.0.4.zip"
        },
        "require": {
            "composer/installers": "^1.0 || ^2.0"
        }
    }
}

Make sure your root composer.json maps the drupal-library type to the libraries directory (the drupal/recommended-project template already does this):

"installer-paths": {
    "web/libraries/{$name}": ["type:drupal-library"]
}

Then install the module — the library is fetched into /libraries/sticky along with it:

composer require drupal/sticky

Manual installation

Alternatively, download version 1.0.x of the Sticky library, rename the folder to sticky, and place it in /libraries/ in your Drupal root.

Configuration

1. Enable the module and clear the cache.
2. Go to Administration » Configuration » System » Sticky (/admin/config/system/sticky).
3. Set the DOM selector for the element you want to make sticky.
4. Optionally adjust the JavaScript settings (spacing, z-index, etc.).
5. Save the configuration.

Sponsors