如何只允许某些组件滚动并保持某些 React 组件固定？

Question

I am trying to create my own version of the Spotify web app with React, and I have made the necessary components for the player, the menu on the left side, and the actual pages for the artists, tracks, and other sites, but I am trying to position them together. How do I set it up so you can scroll only a certain part of the page like in the app. I used postion: fixed; for the menu and player to stay static while scrolling the page, but now the other components showing info like albums and playlists will overlap the player and menu. How do I fix this so that the menu and player do not overlap the other components and the scrolling bar does not go on top of the player once I reach a certain point?

Here is a picture for reference of what it should look like. The right side shows the scrolling bar and will not overlap with the player ever.

This is what my app looks like when I use just a flexbox with the components on the page. The player and menu on the left hand side will go away once you scroll down far enough and only the menu with the artists and albums will show on screen.

This third picture shows what happens when I do position:fixed with the menu and player where it bleeds into the other components like the search list, but if you scroll down, the player and menu will stay on the screen while the search component moves.

return (
        <div className="App">
            <div className="Menu">
                <Menu />
                <Player className="Player" callbackFromParent={this.callBack}/>
            </div>
            <div className="Component">
                <Router>
                <Route path='/ArtistPage' exact component={ArtistPage} />
                <Route path="/search" exact component={Search} />
                <Route path="/AlbumPage" exact component={AlbumPage}/>
                <Route path="/profile" exact component={Profile} />
                <Route path="/playlistPage" exact component={PlaylistPage}/>
                </Router>
            </div>
        </div>
      );

This is my code where I have tried to separate the menu and player together with the rest of the components that change with the page changing.

.App {
  display: flex;
  flex-direction: row;
}

.Component {
  vertical-align: left;
}

.Menu {
  display: flex;
  position: fixed;
  flex-direction: column;
}

And this is the css code that shows the formatting for the after picture above of the components bleeding into each other. Thank you for reading.

Answer 1

position: fixed removes the element from the normal flow of the document.

As a result, rest of the elements behaves as if the element (with position: fixed) does not exist leading to overlapping.

You will have to provide margin-left to the .Component div equal to the width of the .Menu div

Answer 2

You can try wraping the content of the cards inside a div with height: 100% , and then add overflow-y: auto to your div. So the sidebar of your app won`t move.

Something like this:

<div class="app"> 
  <div class="sidebar">
    <!-- Sidebar not scrollable -->
  </div>
  <div class="main-content">
    <!-- All scrollable content should be put in here -->
  </div>
</div>

.app {
  width: 100vw;
  height: 100vh;
}
.sidebar {
  height: 100%;
}
.main-content {
  height: 100%;
  overflow-y: auto; // You can use scroll too
}