Use DOM and CSS (Instead of Stateful Variables) for Pure UI States in React



React-heavy solution

Noting that we often need to debounce the DOM callback because it involves React setState, therefore could be causing unnecessary re-rendering.

DOM-centric solution

In the stacked navbar case, the top 1st will have shorter height when scrolling up (collapsed), and taller when scrolling down (full-height). We may observe scroll direction to determine the collapsed state. In doing so, we can attach the event to the page component directly with element.classList.add('collapsed') and element.classList.remove('collapsed').

Then in the top nav, which needs to know the collapsed state, we can:

:global(.collapsed) .topNav {
  height: $collapsedNavBarHeight;
.topNav {
  height: $normalNavBarHeight;

And in the secondary nav which is required to stick to top, but beneath the top nav, we can do the similar:

:global(.collapsed) .secondaryNav {
  top: $collapsedNavBarHeight;
:global(.collapsed) .secondaryNav {
  position: sticky;
  top: $normalNavBarHeight;