Блог

это css для боковой навигации

 .side-nav {
  // position: sticky;
  top: 0;
  left: 0;
  height: 100vh;
  z-index: 100;
  width: calc(3.5vw   3.5vh);
  // position: fixed;
  amp;.content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: map-get($background-colors, side-nav);
    amp;.logo {
      img {
        width: calc(3.5vw   3.5vh);
        object-fit: cover;
      }
    }
    amp;.icons {
      // object-fit: cover;
      left: 0;
      bottom: 2.2rem;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      amp;.github {
        svg {
          height: 4rem !important;
          width: 4rem !important;
          background-color: map-get($icon-bg-colors, github);
          color: map-get($icon-colors, github);
          border-radius: 50%;
          amp;:hover {
            color: black;
            background-color: white;
          }
        }
      }
      amp;.linkedin {
        svg {
          height: 4rem !important;
          width: 4rem !important;
          background-color: map-get($icon-bg-colors, linkedin);
          color: map-get($icon-colors, linkedin);
          border-radius: 10%;
          amp;:hover {
            color: rgb(25, 25, 109);
          }
        }
      }

      amp;.stackoverflow {
        svg {
          height: 4rem !important;
          width: 4rem !important;
          // color: rgb(235, 152, 0);
          color: map-get($icon-colors, stackoverflow);
          amp;:hover {
            background-color: white;
          }
          amp;:active {
            color: red;
          }
        }
      }
      amp;.twitter {
        svg {
          height: 4rem !important;
          width: 4rem !important;
          // color: rgb(235, 152, 0);
          color: map-get($icon-colors, twitter);
          amp;:hover {
            background-color: white;
          }
          amp;:active {
            color: red;
          }
        }
      }
    }
  }
}
 

если позиция НЕ исправлена, вот как это выглядит

Если я изменю только position:fixed , это то, что я получу:

оказывается, если вы используете overflow-x:hidden , это конфликтовало с position:fixed . Я использовал overflow-x:hidden в элементе body. Я удалил, и он снова работает