https://github.com/evanminto/sticky-sentinel-element

https://github.com/evanminto/sticky-sentinel-element

Last synced: 6 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/evanminto/sticky-sentinel-element
• Owner: evanminto
• License: mit
• Created: 2021-04-08T17:51:15.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-04-08T18:47:56.000Z (over 3 years ago)
• Last Synced: 2024-11-02T14:51:35.690Z (13 days ago)
• Language: JavaScript
• Size: 2.93 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Sticky Sentinel Element

Custom element implementation of the technique described in this

Google Developers article:

https://developers.google.com/web/updates/2017/09/sticky-headers

Documentation is still a work in progress.

## Usage

There's a no-config option for simple use cases:

```html



```


Style the sticky element based on the `stuck` state of the sentinel:

```css

sticky-sentinel[stuck] ~ .sticky-element {

  /* Add your stuck styles here. */

}

```

You can also reference the target element explicitly and set a class on it

directly when it becomes stuck:

```html



```


```css

.sticky-element.stuck {

  /* Add your stuck styles here. */

}

```

**Important:** The sentinel must be placed such that its top edge lines up with

the top edge of the sticky element. The easiest way to do this is to place the

sticky element directly after the sentinel as a sibling.