Fixed sidebar with responsive vertical text

Question

I would like to know how to make my left sidebar position fixed and at the same time keep the vertical text buttons (ABOUT, GALLERY, CONTACT) responsive to the window height.

https://jsbin.com/yaniluy/edit?html,css,output

My webpage main content should scroll but the sidebar shouldn't.

Thank you for your help!

body {
  margin: 0;
}
    
h1 {
  text-align: center;
  font-size: 36px;
}

a {
  margin: 0px auto;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  position: absolute;
  top:50%;
  left:50%;
  writing-mode: tb-rl;
  transform: translateX(-50%) translateY(-50%) rotate(-180deg);
}
  
.nav1 {
  background-color:red;
  position: relative;
  height: 20vh;
  width: 10%;
}
    
.section {
  float: right;
  width: 90%;
}

<div class="section">
    <h1>Lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate enim vitae cursus congue. Nulla eu justo pulvinar, vehicula elit eget, rhoncus eros. Cras felis diam, euismod sed facilisis at, viverra id nisl. Mauris fermentum nulla eget felis luctus, sed accumsan lectus accumsan. Nunc et tempus ligula. Donec fringilla malesuada mauris, id faucibus urna. Nam pulvinar, lorem ut volutpat congue, tortor ex tempus turpis, eget lacinia odio sapien vel neque. Vestibulum porttitor mi in ex cursus laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum.</h1>   
</div>

<div class="nav1">
    <a href="http://www.google.com/">ABOUT</a>
</div>

<div class="nav1">
    <a href="http://www.google.com/">GALLERY</a>
</div>

<div class="nav1">
    <a href="http://www.google.com/">BOOKS</a>
</div>

<div class="nav1">
    <a href="http://www.google.com/">MEDIA</a>
</div>

<div class="nav1">
    <a href="http://www.google.com/">CONTACT</a>
</div>

Answer 1

You can easily achieve this by wrapping your nav in a div with position:fixed. I have modified your code below which I believe achieve's your desired result.

More more information on css's position attribute please visit this webpage.

body {
  margin: 0;
}
    
h1 {
  text-align: center;
  font-size: 36px;
}

a {
  margin: 0px auto;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  position: absolute;
  top:50%;
  left:50%;
  writing-mode: tb-rl;
  transform: translateX(-50%) translateY(-50%) rotate(-180deg);
}
  
.nav1 {
  background-color:red;
  position: relative;
  height: 20vh;
  //width: 10%; this no longer works since they are contained by the fixed div, 
  //but you can add this to the fixed element to achieve the same look
}

.fixed {
    position:fixed;
    width: 10%; 
}
    
.section {
  float: right;
  width: 90%;
}

<div class="section">
    <h1>Lorem ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vulputate enim vitae cursus congue. Nulla eu justo pulvinar, vehicula elit eget, rhoncus eros. Cras felis diam, euismod sed facilisis at, viverra id nisl. Mauris fermentum nulla eget felis luctus, sed accumsan lectus accumsan. Nunc et tempus ligula. Donec fringilla malesuada mauris, id faucibus urna. Nam pulvinar, lorem ut volutpat congue, tortor ex tempus turpis, eget lacinia odio sapien vel neque. Vestibulum porttitor mi in ex cursus laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum.</h1>   
</div>

<div class="fixed">
    <div class="nav1"><a href="http://www.google.com/">ABOUT</a></div>
    <div class="nav1"><a href="http://www.google.com/">GALLERY</a></div>
    <div class="nav1"><a href="http://www.google.com/">BOOKS</a></div>
    <div class="nav1"><a href="http://www.google.com/">MEDIA</a></div>
    <div class="nav1"><a href="http://www.google.com/">CONTACT</a></div>
</div>