如何在 HTML/CSS 网格中添加固定侧边栏？

Question

我是一名学习网络开发的学生，我正在建设一个网站！所以基本上，我正在尝试制作类似于 mit.edu 的东西，其中右侧滚动而左侧保持固定。我在 W3Schools 上找到了关于如何做类似事情的文章，我想我可以用我的“左” div 替换“侧边栏”并增加它的大小。但是，我对此有很多困难...

* {
  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>

我真的很感激任何形式的帮助 - 我已经为此花费了很多时间，但我一无所获。提前致谢！

编辑：[我试过 Arceno 先生的修复方法，但它覆盖了我的导航和右侧。]Here's what it looks like after the second round of fixes

Answer 1

为您的左侧添加这两种样式 class。

height: 100%;
position: fixed;

在你的右边class添加这些：

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

然后在导航栏上添加：

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>

在此处查看fiddle。

如何在 HTML/CSS 网格中添加固定侧边栏？

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

html

javascript

css

sidebar

fixed