We can stick but not stuck! (a little js-request)

Developers
,
1

I find css position:sticky very useful (for exampe, I always use “sticky tiddler titles” via Ctrlpanel > Appearance > ThemeTweaks > StickyTitles )

…but native CSS does not have a way to tell if something is stuck. However, this article gives a nifty js solution for it:

https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/

…so I humbly ask if any of the js-guys in here could somehow adapt this for TW?

With that said, a thing that concerns me is the articles’ explicit mention of the tricky usage of top: -1px in the CSS - does this mean the stuck element must be at that position? The js has a few hard coded 1’s but I can’t tell if this has anything to do with it. Ideally the top: position should of course be set freely.

An envisioned use case is this, i.e display something when scrolling an element into a certain position:

.myElement .popup { display:none; }
.myElement.is-pinned .popup { display:block; }
2

As always the “devil is in the details”.

  • The code is way to simple for production - It’s a nice idea
  • It only works because of the “trick” with top:
  • It only woks with 1 “sticky” element atm

On the other hand we definitely could improve our “sticky handling” using an `IntersectionObserver.

Our current behaviour is painful:

image
image1581×210 28.3 KB

But IntersectionObserver function started to work with major browsers in 2017 except for Safari, where it started to work at 2019.

So for backwards compatibility “complains” this code will not land in the core for the foreseeable future.

3

Thanks @pmario

  • The code is way to simple for production - It’s a nice idea

You mean for the core, right? That would certainly be neat but this is not what I’m requesting. I’m wondering if anyone can make a plugin or whatever is reqired to use it :slight_smile:

  • It only works because of the “trick” with top:

Ah. So, are you/they are implying that it only works for the viewport top edge then? Maybe -1 really means “one step up from viewport top” (wich is 0)… and the construct could be made dynamic?

  • It only woks with 1 “sticky” element atm

Ah, I think I see that when I investigate the code more closely. I don’t understand why is-pinned cannot just be a class to apply like any other (in addition to myElement) and have the js just execute (and assuming that myElement has a defined top: value).

As for the tiddlywiki.com top menu problem, at least there is the .tc-adjust-top-of-scroll (I made an interface for it in Boosters - the second to bottom most booster).

4

XXObserver is already widely used, see How to know when a widget is unmounted? · Jermolene/TiddlyWiki5 · Discussion #5945 · GitHub , because implemented destroy() function by buggyj · Pull Request #7468 · Jermolene/TiddlyWiki5 · GitHub is sadly reverted, we have to include XXObserver on every JS plugin!

5

…in TW core?

The problem @pmario raises is that, specifically, IntersectionObserver started to work in Safari “only” 5 years ago. Are there other XXObservers, used in TW core, that are as new?

6

At the moment the core does not use any observers.

7

No, just in plugins, you can look how plugins uses these in that github discussion.