{"id":19095637,"url":"https://github.com/evanminto/sticky-sentinel-element","last_synced_at":"2026-05-26T09:30:19.911Z","repository":{"id":57112244,"uuid":"356001506","full_name":"evanminto/sticky-sentinel-element","owner":"evanminto","description":null,"archived":false,"fork":false,"pushed_at":"2021-04-08T18:47:56.000Z","size":3,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-04T11:16:18.266Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/evanminto.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}},"created_at":"2021-04-08T17:51:15.000Z","updated_at":"2021-04-08T18:47:58.000Z","dependencies_parsed_at":"2022-08-21T00:00:23.252Z","dependency_job_id":null,"html_url":"https://github.com/evanminto/sticky-sentinel-element","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evanminto%2Fsticky-sentinel-element","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evanminto%2Fsticky-sentinel-element/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evanminto%2Fsticky-sentinel-element/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/evanminto%2Fsticky-sentinel-element/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/evanminto","download_url":"https://codeload.github.com/evanminto/sticky-sentinel-element/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240145926,"owners_count":19755179,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":[],"created_at":"2024-11-09T03:34:40.432Z","updated_at":"2026-05-26T09:30:19.845Z","avatar_url":"https://github.com/evanminto.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sticky Sentinel Element\n\nCustom element implementation of the technique described in this\nGoogle Developers article:\nhttps://developers.google.com/web/updates/2017/09/sticky-headers\n\nDocumentation is still a work in progress.\n\n## Usage\n\nThere's a no-config option for simple use cases:\n\n```html\n\u003csticky-sentinel\u003e\u003c/sticky-sentinel\u003e\n\u003cdiv class=\"sticky-element\"\u003e\u003c/div\u003e\n```\n\nStyle the sticky element based on the `stuck` state of the sentinel:\n\n```css\nsticky-sentinel[stuck] ~ .sticky-element {\n  /* Add your stuck styles here. */\n}\n```\n\nYou can also reference the target element explicitly and set a class on it\ndirectly when it becomes stuck:\n\n```html\n\u003csticky-sentinel target=\"sticky_element\" stuck-class=\"stuck\"\u003e\u003c/sticky-sentinel\u003e\n\u003cdiv id=\"sticky_element\"\u003e\u003c/div\u003e\n```\n\n```css\n.sticky-element.stuck {\n  /* Add your stuck styles here. */\n}\n```\n\n**Important:** The sentinel must be placed such that its top edge lines up with\nthe top edge of the sticky element. The easiest way to do this is to place the\nsticky element directly after the sentinel as a sibling.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevanminto%2Fsticky-sentinel-element","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fevanminto%2Fsticky-sentinel-element","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fevanminto%2Fsticky-sentinel-element/lists"}