[csswg-drafts] [css-position] Events for stickiness changes

cvrebert has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-position] Events for stickiness changes ==
https://drafts.csswg.org/css-position/#sticky-pos

Since the suggestion in #1656 for a `:stuck` pseudo-class is not feasible, the next best alternative would be for browsers to fire events (e.g. `stuck`, `unstuck`), similar to [those of CSS Transitions](https://drafts.csswg.org/css-transitions/#event-transitionevent), whenever a `position: sticky;` element changes its stuckedness. Then the same styling abilities become possible at the cost of a teeny bit of JS and a teeny associated processing delay:

```css
.some-class.is-stuck {
  /* cool stuck-specific styles here */
}
```

```js
myStickyElement.addEventListener('stuck', function () {
  this.classList.add('is-stuck');
});
myStickyElement.addEventListener('unstuck', function () {
  this.classList.remove('is-stuck');
});
```

For robustness, the relevant event also needs to be fired when the element changes between the `posititon: <anything but sticky>` and (`position:sticky`-and-currently-stuck) states.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1660 using your GitHub account

Received on Saturday, 29 July 2017 01:46:08 UTC