Sticky sidebar head to avoid re-scroll

[twMat]

It is problematic that the "sidebar head" scrolls out of sight, forcing manual upscroll for switching tab or searching again etc. IMO a sticky sidebar head would be a definite improvement.

This could either behave like current sticky tiddler heads (theme: Sticky Titles - love it, btw!)... or it could be manual "thumb tack" to fixate in current position on demand. The latter might need some vertical adjustment as the sidebar head in default position does not show very much of the lists below it. I think I heard from someone that we'll later have manual drag resizing of what is set under Controlpanel > Appearence > Theme tweaks > Sizes and I guess this would be applicable for such a thumb tack concept. Personally I think I'd prefer the automatic sticky sidebar head.

Note: switching tab or starting to type new search string should reset list view to show top of list.

In the image I let the TW title + subtitle scroll above window edge only to keep what I consider vital parts visible.

It is also preferable that any sub-tabs, such as the vertical More tabs, remain fixed too.

[tobibeer]

:+1: ...perhaps even be able to turn this on / off

I even more like the idea of tiddler titles (/ headers) that stay visible until we get to the very bottom of the tiddler, to the next tiddler

not where exactly to implement, but perhaps it's easier than I think with something like... https://github.com/ltebean/sticky-header/blob/master/index.js

[twMat]

I even more like the idea of tiddler titles (/ headers) that stay visible until we get to the very bottom of the tiddler, to the next tiddler

You do know about (core) theme Sticky titles, right? Or do you mean something else?

[tobibeer]

You do know about (core) theme Sticky titles, right?

Nope. It doesn't seem to be working in chrome, so I never even noticed. Neat, I'd be in favor of including the tags as well.

[Jermolene]

Nope. It doesn't seem to be working in chrome, so I never even noticed. Neat, I'd be in favor of including the tags as well.

Hugely annoyingly, the Chrome team did implement position: sticky some time ago, and then they removed it:

https://code.google.com/p/chromium/issues/detail?id=231752#c28

[twMat]

Yes, how annoying for such a useful feature. @Jermolene TW theme Sticky should probably have a small mention of this ("does not work in Chrome").

Maybe sticky sidebar head could still be implemented for the Sticky Theme? Eventually Chrome will solve the issue and things are ready.

But just maybe our specific and limited case could be solved in other ways? I'm guessing the whole sidebar is wrapped/treated as one unit right now. If there could be a separation between the "head" and the link-list, we could maybe have only the link list scroll. In my browser the head covers about 1/3 of the vertical space. This is IMO still enough room for viewing the link-list.

Further, maybe the vertical position of the sidebar head could be controlled like the settings for other things under Controlpanel > Appearence > Theme tweaks. Maybe starting to scroll could trigger something so the head position changes? Or maybe this is exactly what does not work... ;-)

[Spangenhelm]

In the same kind: https://github.com/Jermolene/TiddlyWiki5/issues/1029

I am so tired of scrolling all the time ;)

[twMat]

BTW, I notice github is using sticky on this very page:

.discussion-sidebar { position: sticky; ...

...so I'm thinking maybe it would make sense to include it in the deafult theme and "if it works, it works, and if not, then not". Or is there any reason to expect someone who can have this, to not want to have it?

[Jermolene]

Hi @twMat

...so I'm thinking maybe it would make sense to include it in the deafult theme and "if it works, it works, and if not, then not".

That's an excellent point.

Or is there any reason to expect someone who can have this, to not want to have it?

Hmmm, I can't think of one. I'll commit to the prerelease and then we can investigate.

[Jermolene]

There's a new prerelease at http://tiddlywiki.com/prerelease/ that includes sticky titles within the snow white theme.

[twMat]

Excellent. I think this makes sense. BTW, I also noticed that gmail uses sticky, e.g for the text field when drafting an email - i.e the very same company that can't handle sticky in their browser!

[tobibeer]

Allow me to ask again: Rather than endlessly waiting for browsers to catch up with new standards, how about implementing some perhaps rather browser agnostic script with a tiny footprint like...

https://github.com/ltebean/sticky-header/blob/master/index.js

?

[Jermolene]

Hi @tobibeer I commented elsewhere that I'm happy for us to explore a polyfill for position: sticky, but that it needs to be one that can be dropped in seamlessly:

https://github.com/Jermolene/TiddlyWiki5/issues/1029#issuecomment-67164280

[pmario]

https://github.com/ltebean/sticky-header/blob/master/index.js

imo probelmatic implementation. see: http://ejohn.org/blog/learning-from-twitter/ for more. search google for onscroll to see why it's problematic.

[Jermolene]

Hi @pmario using the onscroll event is only bad if you try to do lots of work in the event handler. The recommended approach is to use the onscroll events to trigger a requestAnimationFrame and do the work in that. There's an introduction to the technique here:

http://www.html5rocks.com/en/tutorials/speed/animations/

For me, the problem with ltebean/sticky-header is that it requires a JS call to be made when creating any element that should be sticky. The only way we'd be able to support that is to make the sticky element be a widget, which would not meet the seamless requirement.

[twMat]

Almost forgotten, but now with this in place... any thoughts on the initial request (see image in initial post for quick reminder)? Again; an enhancement for those that it works for - and if it doesn't work then no difference in behaviour.

[Jermolene]

any thoughts on the initial request

I think it's a good idea to experiment with sticky headers on the sidebar.

[pmario]

@Jermolene ... should be labeled "feature reques" or "improvement"

[tobibeer]

@twMat: Do you feel confident enough "experimenting" with any standard browser "stickiness"... and then make a PR if satisfied, otherwise close?

[tobibeer]

@twMat: Do you feel confident enough "experimenting" with any standard browser "stickiness"... and then make a PR if satisfied, otherwise close?