Recommand · October 22, 2021 0

Sidebar is scrolling up despite being position fixed

I’m working on a dashboard for a personal project. I’ve tried using position:sticky on my sidenav but that just creates a margin-right that takes up the whole page and pushing the main content below. And when i tried to use position:fixed the sidenav was scrolling up with the main content instead of staying fixed.

.sidebar {
  flex: 1;
  height: calc(100vh - 64px);
  width: 250px;
  position: fixed;
  top: 64px;
  left: 0;
  display: flex;
  justify-content: center;

  &Container {
    background: var(--dark-color);
    // box-shadow: 5px 5px 10px #0a0a0a, -5px -5px 10px #1c1c1c;
    width: 85%;
    height: 90%;
    position: absolute;
    top: 20px;
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  &Wrapper {
    width: 80%;
    max-height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    top: 20px;
    left: 10px;
  }
export default function Sidebar(props) {
  return (
    <div className="sidebar">
      <div className="sidebarContainer">
        <div className="sidebarWrapper">
          <Link to="/">
            <div
              className={
                props.title === "Dashboard"
                  ? "sidebarItem active"
                  : "sidebarItem"
              }
            >
              <span className="sidebarIcon">
                <i className="fas fa-th"></i>
              </span>
              <span className="sidebarText">Dashboard</span>
            </div>
          </Link>

[This happens when it is "fixed"][1]

.sidebar {
  flex: 1;
  height: calc(100vh - 64px);
  width: 250px;
  position: sticky;
  top: 64px;
  left: 0;
  display: flex;
  justify-content: center;

  &Container {
    background: var(--dark-color);
    // box-shadow: 5px 5px 10px #0a0a0a, -5px -5px 10px #1c1c1c;
    width: 85%;
    height: 90%;
    position: absolute;
    top: 20px;
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

[And this happens when it is "sticky"][2]

And i know it’s margin because when i open dev tools and hover over it, it shows the margin’s color on the right. But the box model says margin is 0. I have no idea what is happening.

Please help!
[1]: https://i.stack.imgur.com/DZjKM.png
[2]: https://i.stack.imgur.com/WI6uC.png