Scroll classes on body

[cornae]

It would be possible to create modern style stick-and-hide bars with Patterns if it would place certain classes on the body tag. It doesn't require to be a pattern on its own. More a standard service.

• User scrolls the page up: class scrolled-up is placed.
• User scrolls the page down: class scrolled-down is placed.

The up class will always replace the down class and vice versa.

Additionally, the following classes could help some designs with altering the look (often the height) of the stick-and-hide bar.

• Scroll position is 0: class scroll-position-top is placed.
• Scroll position is at the bottom of the page: class scroll-position-bottom is placed.

Each class of the scroll position classes is removed as soon as the scroll position is no longer respectively the absolute top or bottom.

[pilz]

I have implemented a demo in patternslib.
If you pull and run "make serve" and then open the scrolling demo at http://0.0.0.0:3001/src/pat/scroll/index.html, you should see the requested classes appear on the body when you scroll. Take a look and let me know what you think!

[cornae]

Looks great. I miss however scroll position top as an initial state. Should I put that one hard coded in the HTML and the .js will remove it when scrolling happens or should the .js put it already initially?

…

Op 27 feb. 2020, om 14:17 heeft Alexander Pilz ***@***.***> het volgende geschreven: I have implemented a demo in patternslib. If you pull and run "make serve" and then open the scrolling demo at http://0.0.0.0:3001/src/pat/scroll/index.html <http://0.0.0.0:3001/src/pat/scroll/index.html>, you should see the requested classes appear on the body when you scroll. Take a look and let me know what you think! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#701?email_source=notifications&email_token=AAFUKKII7RQ3FE2LHH36DNLRE64M7A5CNFSM4KX6VTAKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENEKYTY#issuecomment-591965263>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFUKKOZVN6GKMWR6VPJOZ3RE64M7ANCNFSM4KX6VTAA>.

[cornae]

I notice that if scroll is ignited by a pat-scroll event, the classes are not put/changed. This is in itself great news, because it means we can differentiate between the two. We should probably use the class ‘user-scroll-down/up’ so that in the future we could add a class for auto-scroll-down/up

…

Op 27 feb. 2020, om 14:17 heeft Alexander Pilz ***@***.***> het volgende geschreven: I have implemented a demo in patternslib. If you pull and run "make serve" and then open the scrolling demo at http://0.0.0.0:3001/src/pat/scroll/index.html <http://0.0.0.0:3001/src/pat/scroll/index.html>, you should see the requested classes appear on the body when you scroll. Take a look and let me know what you think! — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#701?email_source=notifications&email_token=AAFUKKII7RQ3FE2LHH36DNLRE64M7A5CNFSM4KX6VTAKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENEKYTY#issuecomment-591965263>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAFUKKOZVN6GKMWR6VPJOZ3RE64M7ANCNFSM4KX6VTAA>.