Q: Making only the content scrollable while other two components are fixed I am creating a website where I only need one part of the web scrollable and others to stay fixed. For example, the About Us page should have navigation and left-side panel fixed, while the other content on the page would be scrollable. How to do this?
I have tried to include Navigation and that left-side panel (let's call it Information) into every single component of my page. But this seems to be not a solution. Also, I have tried to include Navigation and Information components into Router element, but when doing this, the layout doesn't function properly, since those two elements have position: fixed in my case.
import React from 'react';
import Navigation from './Navigation';
import Information from './Information';

const AboutPage = () => (
  <div>
    <Information />
    <Navigation />
    <section className='about'>
      <div className='container'>
        <div className='about__content'>
          <h1>About page</h1>
          <p>
            Irure amet occaecat nostrud dolor aliquip est
            sint laborum eiusmod. Irure do nostrud nulla
            esse do incididunt ad proident nostrud. Labore
            culpa ullamco labore qui deserunt ad proident
            veniam. Adipisicing excepteur ex aliqua
            cupidatat irure aliquip.
          </p>
        </div>
      </div>
    </section>
  </div>
);

export default AboutPage;

import React from 'react';

const Information = () => (
  <div className='information'>
    <h2>Let us know about spreading diseases.</h2>
    <h1>Report it.</h1>
    <p>sveikata.lt</p>
  </div>
);

export default Information;

import React from 'react';
import { NavLink } from 'react-router-dom';

const Navigation = () => (
  <nav className='navigation'>
    <ul>
      <li>
        <NavLink to='/'>about</NavLink>
      </li>
      <li>
        <NavLink to='/report'>report</NavLink>
      </li>
    </ul>
  </nav>
);

export default Navigation;

