How can i place my sticky side-nav inside my section but make it scrollable for all sections?-CodePudding

i want a sticky side nav. I have three sections and place the nev in my first section but it just sticks till the end of the first section.

HTML:

<body>
    <div id="sections">
        <div  id="section1">
            <nav id="my-navigation">
                <div id="container">
                    <li><a href="">Start.</a></li>
                    <li><a href="">My work.</a></li>
                    <li><a href="">Skills.</a></li>
                    <li><a href="">Education.</a></li>
                </div>
            </nav>
        </div>
        <div  id="section2"></div>
        <div  id="section3"></div>
    </div>
</body>

CSS:

* {
    font-size: 16px;
    margin: 0;
}

.section{
    width: 100%;
    height: 100vh;
}

#section1 {
    background-color: grey;
}

#section2 {
    background-color: aquamarine;
}

#section3 {
    background-color: brown;
}

#my-navigation {
    display: inline-block;
    position: sticky;
    height: 75vh;
    top: calc(25vh/2);
    left: 30px;
    border-left: 2px solid #000;
}

#container {
    display: flex;
    height: inherit;
    flex-direction: column;
    justify-content: space-around;
}

#container > li {
    list-style: none;
    margin-left: 1rem;
}

I already tried to place the nav before the first section like this:

<body>
    <div id="sections">
        <nav id="my-navigation">
            <div id="container">
                <li><a href="">Start.</a></li>
                <li><a href="">My work.</a></li>
                <li><a href="">Skills.</a></li>
                <li><a href="">Education.</a></li>
            </div>
        </nav>
        <div  id="section1"></div>
        <div  id="section2"></div>
        <div  id="section3"></div>
    </div>
</body>

But the result was not what i expected.

Is there a possibility to place the nav somehow independent? It just should be sticky for the whole website.

CodePudding user response：

A solution which uses Grid for the global layout and Flex for the navigation links, just to show how to use these two – Grid is two-dimensional, Flex is one-dimensional.

Yes, we could also have used Flex for the global layout here, but using Grids has a pragmatic advantage: There are nice tools available to create them visually.

<!doctype html>
<html>

  <head>
    <style>
      * {
        box-sizing:border-box;
        font-size: 16px;
        margin: 0;
      }

      body {
        display: grid;
        height: 100vh;
        grid-template-columns: auto 1fr;
        grid-template-rows: 1fr;
        gap: 0px 0px;
        grid-template-areas:
          "navi content";
      }
      
        nav {
          grid-area: navi;
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin: auto 30px;
          padding:0 1em;
          border-left: 2px solid #000;
          max-height: calc(100vh - 60px);
          overflow-y: auto;
        }
        
          nav a {
            display:block;
          }

        main {
          grid-area: content;
          overflow-y:auto;
        }

          section {
            width: 100%;
            height: 100vh;
          }
          .s1 { background: grey; }
          .s2 { background: aquamarine; }
          .s3 { background: brown; }

    </style>
  </head>

  <body>
    <nav>
      <a href="">Start.</a>
      <a href="">My work.</a>
      <a href="">Skills.</a>
      <a href="">Education.</a>
    </nav>
    <main>
      <section ></section>
      <section ></section>
      <section ></section>
    </main>
  </body>

</html>

CodePudding user response：

Ok so the solution in my case is just basically to use position: fixed instead of position: sticky. Took me hours to remember there is this option, but worked for me.

#my-navigation {
display: inline-block;
position: fixed;
height: 75vh;
top: calc(25vh/2);
left: 30px;
border-left: 2px solid #000;}