Search code examples
javascripthtmlcsssidebarfixed

How do you add a fixed sidebar inside an HTML/CSS Grid?


I'm a student learning about web development, and I'm building a website right now! So basically, I'm trying to make something similar to mit.edu, where the right side scrolls while the left side remains fixed. I found articles on how to do something like that on W3Schools, and I was thinking I could just replace the "sidebar" with my "left" div, and increase its size. However, I'm having a lot of difficulty with this...

* {
  margin: 0;

  box-sizing: border-box;
}

/* The grid container */
.grid-container {
  height: 100vh;
  display: grid;
  grid-template-areas: 
    'left right' 
    'footer right';
} 

.grid-item {
            
        }
        
        .left { 
            grid-area: left;
            padding-top: 100px;
            padding-left: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
            background-color: #ccc;
            max-width: 45em;
            word-wrap: break-word;
            height: 100%;
            position: fixed;
        }

        #welcomemessagep {
            font-family: century gothic, sans-serif;
            color: white;
            font-size: 20px;
            padding: 20px;
        }
        
        .searchbar {
            padding: 20px;
            width: 100%;
            display: inline-flex;
            justify-content: center;

        }

        .searchbarinput {
            flex: grow 1;
            padding: 10px;
            outline: none;
            border: 1px solid purple;
            border-radius: 5px 0 0 5px;
            background: white;
            transition: background 0.25s, box-shadow 0.25s;
            width: 75%;
            height: 5vh;
        }

        .searchbarinput:focus {
            background: white;
            box-shadow: 0 0 2px purple;
        }
        
        .searchbarinput::placeholder {
            color: purple;
        }

        .searchbarbutton {
            width: 40px;
            background: purple;
            color: white;
            outline: none;
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0 5px 5px 0;
            cursor: pointer;
            user-select: none;
        }

        .searchbarbutton:active {
            box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.25);
        }
        

        .right {
            grid-area: right;
            padding-top: 100px;
            grid-template-areas: 
            'announcements'
            'hero'
            'blurb'
            'articles';
            background-color: black;
            overflow: auto;
            position: absolute;
            right: 0;
            width: 50%;
        }
            
        #announcements-text {
            font-family: century gothic, sans-serif;
            color: red;
            padding: 20px;
            font-size: 20px;
            padding: 20px;
        }
        
        #hero {
            background-image: url("images/horse.jpg");
            height: 100vh;
            width: 100%;
        }
    
        #blurb-text {
            font-family: century gothic, sans-serif;
            color: white;
            font-size: 40px;
            padding: 20px;
        }
        
        .articles {
            font-family: century gothic, sans-serif;
            color: white;
            font-size: 40px;
            padding: 20px;
        }
        
        #articles-text {
            font-family: century gothic, sans-serif;
            color: white;
            font-size: 40px;
            padding-bottom: 20px;
            padding-left: 10px;
        }
        
        #article1, #article2, #article3, #article4, #article5, #article6, #article7, #article8, #article9, #article10 {
            border: 3px solid white;
            color: white;
            padding: 10px;
        }
        
        #article1:hover, #article2:hover, #article3:hover, #article4:hover, #article5:hover, #article6:hover, #article7:hover, #article8:hover, #article9:hover, #article10:hover {
            background-color: purple;
        }
        
        
        
        a:link {
            text-decoration: none;
            color: black;
        }
        
        a:visited {
            color: black;
        }
        
        a:active {
            color: black;
        }

        .footer{
            grid-area: footer;  
            background-color: #ccc;
            height: 100%;
            position: fixed;
        }


.navbar {
    font-family: century gothic, sans-serif;
    background-color: #333;
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    transition: top 0.3s;
    padding: 20px;
    z-index: 1;
}       

.logo {
    width: 3em;
    height: 3em;

}

    
.navbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px;
  text-decoration: none;
}

.navbar a:hover {
  text-decoration: underline;
  text-underline-offset: 8px;
}

.cards {
    height: 20vh;
    display: grid;
    grid-template-areas: 
    'membership-card facebook-card' 
    'donate-card rentals-card';
    gap: 2em;
    padding: 30px;
}

#membership-card, #facebook-card, #donate-card, #rentals-card  {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    padding: 20px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px; 
}

#membership-card:hover, #facebook-card:hover, #donate-card:hover, #rentals-card:hover  {
    box-shadow: 0 16px 32px 0 rgba(0,0,0,0.2);
}

.container {
    padding: 2px 16px;
  }

#iconsize {
    font-size: 50px;
    color: purple;
}

#smallblurbs {
    text-align: center;
    font-size: 15px;
    font-weight: normal;
}

p {
    font-size: 40px;
}][1]


  
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Elk Beaver Lake Equestrian Society</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="style.css">  
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>

  <body>

        
  <div class="navbar" id="navbar">
            <img class="logo" src="images/logo.png">
            <a href="#home">Home</a>
            <a href="#membership">Membership</a>
            <a href="#facilities">Facilities</a>
            <a href="#trails">Trails</a>
            <a href="#aboutus">About Us</a>
            <a href="https://www.facebook.com/parkridersunited/">Facebook</a>
    </div>
    
    <div class="grid-container">
            
        <div class="grid-item left">
            <form action="index.html" method="get">
                <div id="welcomemessage"> <p id="welcomemessagep"> Welcome to EBLES! EBLES promotes sensible riding in Elk/Beaver Lake Park so that the equestrian community 
                can co-exist with all users of the park. The community rings remain in existence because EBLES and our members maintain it for the use of everyone.</p></div>
                <div class="searchbar">
                    <input type="text" class="searchbarinput" name="search" placeholder="Search the Website!">
                    <button type="submit" class="searchbarbutton"> 
                        <i class="material-icons">search</i>
                    </button>
                </div>
            </form>

            <div class="cards">
                <a href="membership.html"> <div id="membership-card"> 
                    <i class="material-icons" id="iconsize">people</i>
                    <div class="container">
                    <p>Membership</p>
                    <p id=smallblurbs>Buy your 2021 membership!</p>
                    </div>
                </div>
                </a>

                <a href="https://www.facebook.com/parkridersunited/"> <div id="facebook-card">
                    <i class="material-icons" id="iconsize">facebook</i>
                    <div class="container">
                        <p>Facebook</p>
                    <p id=smallblurbs>Join our community!</p>
                    </div>
                </div>
                </a>

                <a href="aboutus.html"><div id="donate-card">
                    <i class="material-icons" id="iconsize">savings</i>
                    <div class="container">
                    <p>Donate</p>
                    <p id=smallblurbs>Help support local riders!</p>
                    </div>
                </div>
            </a>

                <a href="facilities.html"><div id="rentals-card">
                    <i class="material-icons" id="iconsize">bedroom_baby</i>
                    <div class="container">
                    <p>Rentals</p>
                    <p id=smallblurbs>Want to ride? Give rentals a try!</p>
                    </div>
                </div>
            </a>

            </div>
        
            
        </div>
                
                
        <div class="grid-item footer">
            footer
        </div>

        
       
        <div class="grid-item right">
            <div id="announcements">
            <p id=announcements-text> Following recommendations by HCBC and Equine Canada, the 2020 EBLES Annual Poker Ride and Trail Class is postponed. Click here for more info! </p>
            </div>
            <div id="hero">
            </div>
            <div id="blurb"> 
            <p id=blurb-text> Horses are amazing. People who ride them are too. Join us today. </p>
            </div>
            
            <br>
            
            <div class="articles">
            <p id=articles-text> Here's some articles for you to read: </p>
                <a href="https://ebles.org/files/eblesminutesdec2020.pdf"><div id="article1"> May 3, 2021 - May 2021 Minutes </p> </div> </a>
                <div id="article2"> <p> April 6, 2021 - April 2021 Minutes </p> </div>
                <div id="article3"> <p> April 1, 2021 - New Baby Horse is Born!</p></div>
                <div id="article4"> <p> March 24, 2021 - New COVID-19 Updates </p></div>
                <div id="article5"> <p> March 2, 2021 - March 2021 Minutes </p></div>
                <div id="article6"> <p> February 8, 2021 - February 2021 Minutes </p></div>
                <div id="article7"> <p> January 9, 2021 - January 2021 Minutes </p></div>
                <div id="article8"> <p> January 1, 2021 - Happy New Year! </p></div>
                <div id="article9"> <p> December 25, 2020 - Merry Christmas to All! Stay safe! </p></div>
                <div id="article10"> <p> December 4, 2020 - December 2020 Minutes </p></div>
            </div>
            

        
                    
        </div>
    </div>
    
<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-20%";
  }
  prevScrollpos = currentScrollPos;
}

</script>   

    
</body>
</html>

I would really appreciate any sort of help - I've spent hours and hours on this and I've come up with nothing. Thank you so much in advance!

Edit: [I've tried Mr Arceno's fix, but it covers both my nav and my right side.]Here's what it looks like after the second round of fixes


Solution

  • Add these two styles for your left class.

    height: 100%;
    position: fixed;
    

    On your right class add these:

    width: 50%;
    position: absolute;
    right: 0;
    

    Then on the navbar add:

    z-index: 1
    

     * {
      margin: 0;
    
      box-sizing: border-box;
    }
    
    /* The grid container */
    .grid-container {
      height: 100vh;
      display: grid;
      grid-template-areas: 
        'left right' 
        'footer right';
    } 
    
    .grid-item {
    
            }
    
            .left { 
                /*grid-area: left;*/
                height: 100%;
          position: fixed;
          padding-top: 100px;
          padding-left: 20px;
          padding-right: 20px;
          padding-bottom: 20px;
          background-color: #ccc;
          max-width: 45em;
          word-wrap: break-word;
            }
    
        #welcomemessagep {
          font-family: century gothic, sans-serif;
          color: white;
          font-size: 20px;
          padding: 20px;
        }
    
        .searchbar {
          padding: 20px;
          width: 100%;
          display: inline-flex;
          justify-content: center;
    
        }
    
        .searchbarinput {
          flex: grow 1;
          padding: 10px;
          outline: none;
          border: 1px solid purple;
          border-radius: 5px 0 0 5px;
          background: white;
          transition: background 0.25s, box-shadow 0.25s;
          width: 75%;
          height: 5vh;
        }
    
        .searchbarinput:focus {
          background: white;
          box-shadow: 0 0 2px purple;
        }
    
        .searchbarinput::placeholder {
          color: purple;
        }
    
        .searchbarbutton {
          width: 40px;
          background: purple;
          color: white;
          outline: none;
          border: none;
          display: flex;
          align-items: center;
          justify-content: center;
          border-radius: 0 5px 5px 0;
          cursor: pointer;
          user-select: none;
        }
    
        .searchbarbutton:active {
          box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.25);
        }
    
    
            .right {
                grid-area: right;
          padding-top: 100px;
          grid-template-areas: 
          'announcements'
          'hero'
          'blurb'
          'articles';
          background-color: black;
          width: 50%;
          position: absolute;
          right: 0;
            }
    
        #announcements-text {
          font-family: century gothic, sans-serif;
          color: red;
          padding: 20px;
          font-size: 20px;
          padding: 20px;
        }
    
        #hero {
          background-image: url("images/horse.jpg");
          height: 100vh;
          width: 100%;
        }
    
        #blurb-text {
          font-family: century gothic, sans-serif;
          color: white;
          font-size: 40px;
          padding: 20px;
        }
    
        .articles {
          font-family: century gothic, sans-serif;
          color: white;
          font-size: 40px;
          padding: 20px;
        }
    
        #articles-text {
          font-family: century gothic, sans-serif;
          color: white;
          font-size: 40px;
          padding-bottom: 20px;
          padding-left: 10px;
        }
    
        #article1, #article2, #article3, #article4, #article5, #article6, #article7, #article8, #article9, #article10 {
          border: 3px solid white;
          color: white;
          padding: 10px;
        }
    
        #article1:hover, #article2:hover, #article3:hover, #article4:hover, #article5:hover, #article6:hover, #article7:hover, #article8:hover, #article9:hover, #article10:hover {
          background-color: purple;
        }
    
    
    
        a:link {
          text-decoration: none;
          color: black;
        }
    
        a:visited {
          color: black;
        }
    
        a:active {
          color: black;
        }
    
            .footer{
                grid-area: footer;  
          background-color: #ccc;
        }
    
    .navbar {
      font-family: century gothic, sans-serif;
      background-color: #333;
      position: fixed;
      top: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      transition: top 0.3s;
      padding: 20px;
      z-index: 1;
    }       
    
    .navbar a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 15px;
      text-decoration: none;
    }
    
    .navbar a:hover {
      text-decoration: underline;
      text-underline-offset: 8px;
    }
    
    .cards {
      height: 20vh;
      display: grid;
        grid-template-areas: 
        'membership-card facebook-card' 
        'donate-card rentals-card';
      gap: 2em;
      padding: 30px;
    }
    
    #membership-card, #facebook-card, #donate-card, #rentals-card  {
      text-align: center;
      font-size: 20px;
      font-weight: bold;
      padding: 20px;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
      transition: 0.3s;
      border-radius: 5px; 
    }
    
    #membership-card:hover, #facebook-card:hover, #donate-card:hover, #rentals-card:hover  {
      box-shadow: 0 16px 32px 0 rgba(0,0,0,0.2);
    }
    
    .container {
      padding: 2px 16px;
      }
    
    #iconsize {
      font-size: 50px;
      color: purple;
    }
    
    #smallblurbs {
      text-align: center;
      font-size: 15px;
      font-weight: normal;
    }
    
    p {
      font-size: 40px;
    }
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="utf-8">
      <title>Elk Beaver Lake Equestrian Society</title>
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="style.css">
      <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    </head>
    
    <body>
    
      <div class="navbar" id="navbar">
        <a href="#home">Home</a>
        <a href="#membership">Membership</a>
        <a href="#facilities">Facilities</a>
        <a href="#trails">Trails</a>
        <a href="#aboutus">About Us</a>
        <a href="https://www.facebook.com/parkridersunited/">Facebook</a>
      </div>
    
      <div class="grid-container">
    
        <div class="grid-item left">
          <form action="index.html" method="get">
            <div id="welcomemessage">
              <p id="welcomemessagep"> Welcome to EBLES! EBLES promotes sensible riding in Elk/Beaver Lake Park so that the equestrian community can co-exist with all users of the park. The community rings remain in existence because EBLES and our members maintain it for the use
                of everyone.</p>
            </div>
            <div class="searchbar">
              <input type="text" class="searchbarinput" name="search" placeholder="Search the Website!">
              <button type="submit" class="searchbarbutton"> 
                <i class="material-icons">search</i>
              </button>
            </div>
          </form>
    
          <div class="cards">
            <a href="membership.html">
              <div id="membership-card">
                <i class="material-icons" id="iconsize">people</i>
                <div class="container">
                  <p>Membership</p>
                  <p id=smallblurbs>Buy your 2021 membership!</p>
                </div>
              </div>
            </a>
    
            <a href="https://www.facebook.com/parkridersunited/">
              <div id="facebook-card">
                <i class="material-icons" id="iconsize">facebook</i>
                <div class="container">
                  <p>Facebook</p>
                  <p id=smallblurbs>Join our community!</p>
                </div>
              </div>
            </a>
    
            <a href="aboutus.html">
              <div id="donate-card">
                <i class="material-icons" id="iconsize">savings</i>
                <div class="container">
                  <p>Donate</p>
                  <p id=smallblurbs>Help support local riders!</p>
                </div>
              </div>
            </a>
    
            <a href="facilities.html">
              <div id="rentals-card">
                <i class="material-icons" id="iconsize">bedroom_baby</i>
                <div class="container">
                  <p>Rentals</p>
                  <p id=smallblurbs>Want to ride? Give rentals a try!</p>
                </div>
              </div>
            </a>
    
          </div>
    
    
        </div>
    
    
        <div class="grid-item footer">
          footer
        </div>
    
    
    
        <div class="grid-item right">
          <div id="announcements">
            <p id=announcements-text> Following recommendations by HCBC and Equine Canada, the 2020 EBLES Annual Poker Ride and Trail Class is postponed. Click here for more info! </p>
          </div>
          <div id="hero">
          </div>
          <div id="blurb">
            <p id=blurb-text> Horses are amazing. People who ride them are too. Join us today. </p>
          </div>
    
          <br>
    
          <div class="articles">
            <p id=articles-text> Here's some articles for you to read: </p>
            <a href="https://ebles.org/files/eblesminutesdec2020.pdf">
              <div id="article1"> May 3, 2021 - May 2021 Minutes </p>
              </div>
            </a>
            <div id="article2">
              <p> April 6, 2021 - April 2021 Minutes </p>
            </div>
            <div id="article3">
              <p> April 1, 2021 - New Baby Horse is Born!</p>
            </div>
            <div id="article4">
              <p> March 24, 2021 - New COVID-19 Updates </p>
            </div>
            <div id="article5">
              <p> March 2, 2021 - March 2021 Minutes </p>
            </div>
            <div id="article6">
              <p> February 8, 2021 - February 2021 Minutes </p>
            </div>
            <div id="article7">
              <p> January 9, 2021 - January 2021 Minutes </p>
            </div>
            <div id="article8">
              <p> January 1, 2021 - Happy New Year! </p>
            </div>
            <div id="article9">
              <p> December 25, 2020 - Merry Christmas to All! Stay safe! </p>
            </div>
            <div id="article10">
              <p> December 4, 2020 - December 2020 Minutes </p>
            </div>
          </div>
    
    
    
    
        </div>
      </div>
    
      <script>
        var prevScrollpos = window.pageYOffset;
        window.onscroll = function() {
          var currentScrollPos = window.pageYOffset;
          if (prevScrollpos > currentScrollPos) {
            document.getElementById("navbar").style.top = "0";
          } else {
            document.getElementById("navbar").style.top = "-20%";
          }
          prevScrollpos = currentScrollPos;
        }
      </script>
    
    
    </body>
    
    </html>

    See it here on this fiddle.