search

the-programmers-hangout / website

🌳 TPH website
https://theprogrammershangout.com
MIT License
102 stars 67 forks source link

[Feature/Design] Style new resources header #391

Closed jumpyapple closed 3 years ago

jumpyapple commented 3 years ago

Note: This a WIP for issue #347.

The first commit contains a proof of concept that uses debouncing idea described in https://css-tricks.com/styling-based-on-scroll-position/ to record window.scrollY value and renders the BoxedTitle base on the value. The box is hidden when the value of window.scrollY is greater than 30. (component class structure is based on example on https://fettblog.eu/typescript-react/components/#class-components)

The class-style React component is used to register an event listener for scrolling event.

Next is to either render new style of HeaderWrapper and BoxedTitle when the value of widow.scrollY is greater than 250.

veksen commented 3 years ago

This was an epic contribution, thank you very much :D

I went ahead and fixed the "flash" of sticky header when scrolling inbetween, and moved to a more reliable API for scrolling, while moving the component back to a function component, plus some minor css adjustments.

A follow up task would most likely to do a little clean-up pass on the duplicated styles for the sticky styles, but I'm happy with functionality to go ahead and merge.