I've taken a different approach for similar needs in the past... I have the current window size and scroll position in my state, and have windows events for resize/onscroll update said values... from there, I can have pure rendering that uses the values... Also, but centralizing the size/position values, I can have multiple components that handle their rendering as appropriate internally.

    window.addEventListener(
      'resize', 
      ()=>store.dispatch({
        type: 'WINDOW_RESIZE'
      })
    );
    window.addEventListener(
      'scroll', 
      ()=>store.dispatch({
        type: 'WINDOW_SCROLL'
      })
    );

NOTE: you should double-check your scroll position, as the scroll events continue to fire as you hit the edge of the viewport.