{"id":29632775,"url":"https://github.com/thomasdev-de/jquery-affix","last_synced_at":"2026-02-06T05:31:37.903Z","repository":{"id":299022815,"uuid":"1001659961","full_name":"ThomasDev-de/jquery-affix","owner":"ThomasDev-de","description":"A lightweight jQuery plugin that provides a flexible sticky behavior with configurable options and breakpoints.","archived":false,"fork":false,"pushed_at":"2025-06-16T06:20:27.000Z","size":46,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-07T12:31:24.240Z","etag":null,"topics":["affix","jquery-plugin","responsive","scroll","sticky"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ThomasDev-de.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-13T19:13:26.000Z","updated_at":"2025-08-02T11:11:47.000Z","dependencies_parsed_at":"2025-06-14T07:47:40.264Z","dependency_job_id":"56cd05e1-b89b-44e7-b08a-af305165becf","html_url":"https://github.com/ThomasDev-de/jquery-affix","commit_stats":null,"previous_names":["thomasdev-de/jquery-affix"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/ThomasDev-de/jquery-affix","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fjquery-affix","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fjquery-affix/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fjquery-affix/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fjquery-affix/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ThomasDev-de","download_url":"https://codeload.github.com/ThomasDev-de/jquery-affix/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ThomasDev-de%2Fjquery-affix/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29152426,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-06T02:39:25.012Z","status":"ssl_error","status_checked_at":"2026-02-06T02:37:22.784Z","response_time":59,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["affix","jquery-plugin","responsive","scroll","sticky"],"created_at":"2025-07-21T13:03:43.030Z","updated_at":"2026-02-06T05:31:37.871Z","avatar_url":"https://github.com/ThomasDev-de.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# jQuery Affix Plugin\n\nThe **jQuery Affix Plugin** allows you to create sticky elements on your webpage with configurable offsets and optional\nbreakpoints. It is lightweight, easy to use, and supports multiple affix elements.\n\n---\n\n## Features\n\n- Sticky positioning using CSS `position: sticky`.\n- Configurable `offsetTop` to adjust the sticky position.\n- Optional breakpoints to activate the sticky functionality only at specific screen widths.\n- Automatically handles multiple affix elements with proper stacking (`z-index`) and offsets.\n- Compatible with modern web browsers.\n\n---\n\n## Installation\n\n1. Include jQuery in your project (if not already included):\n\n```html\n\u003cscript src=\"https://code.jquery.com/jquery-3.7.0.min.js\"\u003e\u003c/script\u003e\n```\n\n2. Add the `affix` plugin script to your project:\n\n```html\n\u003cscript src=\"dist/jquery-affix.min.js\"\u003e\u003c/script\u003e\n```\n\n---\n\n## Usage\n\nTo use the affix plugin, call the `.affix()` method on the desired element.\nYou can pass optional configurations (as described below).\n\n### Basic Example\n\n```html\n\n\u003cdiv id=\"my-sticky-element\"\u003e\n    I am a sticky element!\n\u003c/div\u003e\n\n\u003cscript\u003e\n    $(document).ready(function () {\n        $('#my-sticky-element').affix();\n    });\n\u003c/script\u003e\n```\n\nIn this example, the `#my-sticky-element` will stick to the top of its container when you scroll past it.\n\n---\n\n## Configuration Options\n\nThe plugin provides the following configuration options:\n\n| Option          | Type                 | Default | Description                                                                    |\n|-----------------|----------------------|---------|--------------------------------------------------------------------------------|\n| `offsetTop`     | `number` (pixels)    | `0`     | Additional spacing to apply at the top before the sticky styling takes effect. |\n| `breakpoint`    | `number` or `string` | `null`  | Minimum screen width (in pixels or predefined breakpoint) to enable sticky.    |\n\n### Predefined Breakpoints:\n\nYou can use the following values for the `breakpoint` option:\n\n| Breakpoint Name | Screen Width (px) |\n|-----------------|-------------------|\n| `sm`            | 576               |\n| `md`            | 768               |\n| `lg`            | 992               |\n| `xl`            | 1200              |\n| `xxl`           | 1400              |\n| `any number`    | 2000              |\n\n---\n\n### Events\n\nThe Affix element fires three events:\n\n```javascript\n$(document)\n    .on('init', '#my-sticky-element', function (){\n        // I am now part of the Affix Plugin\n    })\n    .on('affixed', '#my-sticky-element', function (){\n        // I was pinned\n    })\n    .on('unaffixed', '#my-sticky-element', function (){\n        // I was unpinned\n    })\n```\n\n### Example with Options\n\n```html\n\n\u003cdiv id=\"custom-sticky-element\"\u003e\n    I will stick with custom settings!\n\u003c/div\u003e\n\n\u003cscript\u003e\n    $(document).ready(function () {\n        $('#custom-sticky-element').affix({\n            offsetTop: 50,          // Stick 50px below the viewport top\n            breakpoint: 'md'        // Activate sticky only on screens \u003e= 768px wide\n        });\n    });\n\u003c/script\u003e\n```\n\n---\n\n## Advanced Usage\n\n### Multiple Sticky Elements\n\nThe plugin automatically handles multiple sticky elements and ensures that each subsequent element takes into account\nthe height of the previous ones. Here's an example:\n\n```html\n\n\u003cdiv class=\"affix-item\"\u003eElement 1\u003c/div\u003e\n\u003cdiv class=\"affix-item\"\u003eElement 2\u003c/div\u003e\n\n\u003cscript\u003e\n    $(document).ready(function () {\n        $('.affix-item').affix({\n            offsetTop: 10 // Each element will stick 10px below the previous one\n        });\n    });\n\u003c/script\u003e\n```\n\n### Directly Specifying Breakpoints\n\nYou can pass numerical values as breakpoints instead of predefined strings:\n\n```html\n\n\u003cdiv id=\"dynamic-breakpoint\"\u003e\n    I stick on screens \u003e= 1000px wide.\n\u003c/div\u003e\n\n\u003cscript\u003e\n    $(document).ready(function () {\n        $('#dynamic-breakpoint').affix({\n            breakpoint: 1000 // Activate sticky only on screens \u003e= 1000px wide\n        });\n    });\n\u003c/script\u003e\n```\n\n---\n\n## How It Works\n\nHere is a brief overview of the plugin's internal behavior:\n\n1. **Initialization**:\n    - The plugin processes each element and attaches settings like `offsetTop` and `breakpoint`.\n    - Registers a `ResizeObserver` for dynamic recalculations.\n\n2. **Sticky Logic**:\n    - Calculates offsets for each sticky element, based on its position in the DOM and the height of prior elements.\n    - Uses predefined or custom breakpoints to enable/disable sticky positioning dynamically.\n\n3. **Positioning**:\n    - Applies `position: sticky` and adjusts `top` and `z-index` to maintain order and avoid overlaps.\n\n---\n\n## Browser Support\n\nThis plugin relies on the browser's support for the CSS `position: sticky` property. Ensure your users have a modern\nbrowser for full functionality.\n\nTested on:\n\n- Google Chrome (latest versions)\n- Mozilla Firefox (latest versions)\n- Microsoft Edge\n\n---\n\n## Troubleshooting\n\n- **Sticky not working on older browsers**:\n  Ensure the browser supports the CSS `position: sticky` property. Check [Can I Use](https://caniuse.com/?search=sticky)\n  for browser compatibility.\n\n- **Element not sticking at the correct position**:\n  Double-check the `offsetTop` setting and ensure no `margin` or `transform` styles are interfering with the sticky\n  behavior.\n\n---\n\n## License\n\nThis plugin is open-source and available under the **MIT License**.\n\n---\n\n## Author\n\nThis plugin was created to simplify sticky functionality for dynamic web interfaces using jQuery.\n\nIf you have any feedback or questions, feel free to reach out!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasdev-de%2Fjquery-affix","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthomasdev-de%2Fjquery-affix","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthomasdev-de%2Fjquery-affix/lists"}