title: Append components to a fixed list using react-window?
body: <p>I have a fixed list and grid using <a href="https://github.com/bvaughn/react-window" rel="noreferrer">react-window</a>, <a href="https://github.com/bvaughn/react-window-infinite-loader" rel="noreferrer">infinite loader</a>, and <a href="https://github.com/bvaughn/react-virtualized-auto-sizer" rel="noreferrer">auto sizer</a>. It's working fine but I'm looking to append a component before the list/grid starts (for example, a search box and a button). What's the correct approach to accomplish this? I want this component to scroll with the fixed list and not scroll separately. I've tired just rendering the component before but then it's not in the fixed list container and doesn't scroll with it.</p>
  
  <pre><code>{/* WANT TO ADD SOME SORT OF COMPONENT HERE SO IT CAN SCROLL WITH LIST */}
  {/* CAN'T IN HERE BECAUSE ITS NOT INSIDE THE FIXED CONTAINER SO IT SCROllS SEPARATELY */}
  &lt;AutoSizer&gt;
      {({ height, width }) =&gt; (
          &lt;InfiniteLoader
              isItemLoaded={index =&gt; index &lt; stateData.data.length}
              itemCount={stateData.data.length + 1}
              loadMoreItems={loadMoreProducts}
          &gt;
              {({ onItemsRendered, ref }) =&gt; (
                  &lt;FixedSizeList
                      onItemsRendered={onItemsRendered}
                      ref={ref}
                      height={height}
                      itemCount={stateData.data.length + 1}
                      itemSize={350}
                      width={width}
                  &gt;
                      {/* WANT TO ADD SOME SORT OF COMPONENT HERE SO IT CAN SCROLL WITH LIST */}
                      {/* CAN'T IN HERE BECAUSE ITS LOOPING LISTITEM */}
                      {ListItem}
                  &lt;/FixedSizeList&gt;
              )}
          &lt;/InfiniteLoader&gt;
      )}
  &lt;/AutoSizer&gt;
  </code></pre>
  
  <p>Edit: Pretty much I don't want the list (or grid) and the actual page to be two different scroll containers. I'd like the whole page to scroll together. I've come across this issue because some of my containers need to have an infinite list of items users can scroll through so the list needed to be virtualized to improve performance.</p>
  
  <p>See a demo <a href="https://codesandbox.io/s/laughing-leftpad-klr4x" rel="noreferrer"><strong>here</strong></a>. Really the fixed container should just be considered the whole page and the search box and everything else should scroll with the infinite list. Having two different scroll containers isn't too great for the ux. </p>