PHPackages                             webcito/jquery-affix - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. webcito/jquery-affix

ActiveLibrary[Utility & Helpers](/categories/utility)

webcito/jquery-affix
====================

A lightweight jQuery plugin that provides a flexible sticky behavior with configurable options and breakpoints.

1.0.3(11mo ago)023MIT

Since Jun 14Pushed 11mo ago1 watchersCompare

[ Source](https://github.com/ThomasDev-de/jquery-affix)[ Packagist](https://packagist.org/packages/webcito/jquery-affix)[ Docs](https://github.com/ThomasDev-de/jquery-affix)[ RSS](/packages/webcito-jquery-affix/feed)WikiDiscussions main Synced 1mo ago

READMEChangelog (4)Dependencies (1)Versions (5)Used By (0)

jQuery Affix Plugin
===================

[](#jquery-affix-plugin)

The **jQuery Affix Plugin** allows you to create sticky elements on your webpage with configurable offsets and optional breakpoints. It is lightweight, easy to use, and supports multiple affix elements.

---

Features
--------

[](#features)

- Sticky positioning using CSS `position: sticky`.
- Configurable `offsetTop` to adjust the sticky position.
- Optional breakpoints to activate the sticky functionality only at specific screen widths.
- Automatically handles multiple affix elements with proper stacking (`z-index`) and offsets.
- Compatible with modern web browsers.

---

Installation
------------

[](#installation)

1. Include jQuery in your project (if not already included):

```

```

2. Add the `affix` plugin script to your project:

```

```

---

Usage
-----

[](#usage)

To use the affix plugin, call the `.affix()` method on the desired element. You can pass optional configurations (as described below).

### Basic Example

[](#basic-example)

```

    I am a sticky element!

    $(document).ready(function () {
        $('#my-sticky-element').affix();
    });

```

In this example, the `#my-sticky-element` will stick to the top of its container when you scroll past it.

---

Configuration Options
---------------------

[](#configuration-options)

The plugin provides the following configuration options:

OptionTypeDefaultDescription`offsetTop``number` (pixels)`0`Additional spacing to apply at the top before the sticky styling takes effect.`breakpoint``number` or `string``null`Minimum screen width (in pixels or predefined breakpoint) to enable sticky.### Predefined Breakpoints:

[](#predefined-breakpoints)

You can use the following values for the `breakpoint` option:

Breakpoint NameScreen Width (px)`sm`576`md`768`lg`992`xl`1200`xxl`1400`any number`2000---

### Events

[](#events)

The Affix element fires three events:

```
$(document)
    .on('init', '#my-sticky-element', function (){
        // I am now part of the Affix Plugin
    })
    .on('affixed', '#my-sticky-element', function (){
        // I was pinned
    })
    .on('unaffixed', '#my-sticky-element', function (){
        // I was unpinned
    })
```

### Example with Options

[](#example-with-options)

```

    I will stick with custom settings!

    $(document).ready(function () {
        $('#custom-sticky-element').affix({
            offsetTop: 50,          // Stick 50px below the viewport top
            breakpoint: 'md'        // Activate sticky only on screens >= 768px wide
        });
    });

```

---

Advanced Usage
--------------

[](#advanced-usage)

### Multiple Sticky Elements

[](#multiple-sticky-elements)

The plugin automatically handles multiple sticky elements and ensures that each subsequent element takes into account the height of the previous ones. Here's an example:

```
Element 1
Element 2

    $(document).ready(function () {
        $('.affix-item').affix({
            offsetTop: 10 // Each element will stick 10px below the previous one
        });
    });

```

### Directly Specifying Breakpoints

[](#directly-specifying-breakpoints)

You can pass numerical values as breakpoints instead of predefined strings:

```

    I stick on screens >= 1000px wide.

    $(document).ready(function () {
        $('#dynamic-breakpoint').affix({
            breakpoint: 1000 // Activate sticky only on screens >= 1000px wide
        });
    });

```

---

How It Works
------------

[](#how-it-works)

Here is a brief overview of the plugin's internal behavior:

1. **Initialization**:

    - The plugin processes each element and attaches settings like `offsetTop` and `breakpoint`.
    - Registers a `ResizeObserver` for dynamic recalculations.
2. **Sticky Logic**:

    - Calculates offsets for each sticky element, based on its position in the DOM and the height of prior elements.
    - Uses predefined or custom breakpoints to enable/disable sticky positioning dynamically.
3. **Positioning**:

    - Applies `position: sticky` and adjusts `top` and `z-index` to maintain order and avoid overlaps.

---

Browser Support
---------------

[](#browser-support)

This plugin relies on the browser's support for the CSS `position: sticky` property. Ensure your users have a modern browser for full functionality.

Tested on:

- Google Chrome (latest versions)
- Mozilla Firefox (latest versions)
- Microsoft Edge

---

Troubleshooting
---------------

[](#troubleshooting)

- **Sticky not working on older browsers**: Ensure the browser supports the CSS `position: sticky` property. Check [Can I Use](https://caniuse.com/?search=sticky)for browser compatibility.
- **Element not sticking at the correct position**: Double-check the `offsetTop` setting and ensure no `margin` or `transform` styles are interfering with the sticky behavior.

---

License
-------

[](#license)

This plugin is open-source and available under the **MIT License**.

---

Author
------

[](#author)

This plugin was created to simplify sticky functionality for dynamic web interfaces using jQuery.

If you have any feedback or questions, feel free to reach out!

###  Health Score

28

—

LowBetter than 54% of packages

Maintenance52

Moderate activity, may be stable

Popularity6

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity40

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~0 days

Total

4

Last Release

338d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/6d5f10c16b4b6bd1ac531ffc39c23c569490ec4630829511692c03ec89d36a11?d=identicon)[thomasK81](/maintainers/thomasK81)

---

Top Contributors

[![ThomasDev-de](https://avatars.githubusercontent.com/u/67106837?v=4)](https://github.com/ThomasDev-de "ThomasDev-de (15 commits)")

---

Tags

affixjquery-pluginresponsivescrollstickypluginjqueryresponsivescrollaffixsticky

### Embed Badge

![Health badge](/badges/webcito-jquery-affix/health.svg)

```
[![Health](https://phpackages.com/badges/webcito-jquery-affix/health.svg)](https://phpackages.com/packages/webcito-jquery-affix)
```

###  Alternatives

[flesler/jquery.scrollto

Lightweight, cross-browser and highly customizable animated scrolling with jQuery

3.7k40.1k](/packages/flesler-jqueryscrollto)[onokumus/metismenu

A jQuery menu plugin

2.0k263.3k5](/packages/onokumus-metismenu)[kartik-v/yii2-widget-datepicker

Enhanced Yii2 wrapper for the bootstrap datepicker plugin (sub repo split from yii2-widgets).

1097.0M60](/packages/kartik-v-yii2-widget-datepicker)[kartik-v/yii2-widget-datetimepicker

Enhanced Yii2 wrapper for the bootstrap datetimepicker plugin (sub repo split from yii2-widgets)

1036.5M47](/packages/kartik-v-yii2-widget-datetimepicker)[kartik-v/yii2-widget-affix

A scrollspy and affixed enhanced navigation to highlight page sections (sub repo split from yii2-widgets)

153.8M3](/packages/kartik-v-yii2-widget-affix)[kartik-v/yii2-widget-depdrop

Widget that enables setting up dependent dropdowns with nested dependencies (sub repo split from yii2-widgets)

814.9M18](/packages/kartik-v-yii2-widget-depdrop)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)