如何实现固定吸附（sticky）且带有垂直滚动条的侧边栏

你可以直接添加以下CSS代码实现需求：

/* 给侧边栏外层容器添加自定义样式 */
.sidebar-wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
/* 可选：滚动条样式美化 */
.sidebar-wrapper::-webkit-scrollbar {
  width: 6px;
}
.sidebar-wrapper::-webkit-scrollbar-track {
  background: #f8f9fa;
}
.sidebar-wrapper::-webkit-scrollbar-thumb {
  background: #cccccc;
  border-radius: 3px;
}

给你原来的外层div新增sidebar-wrapper类名即可，内部原有代码不需要改动，修改后的结构参考：

<div class="col-md-4 bg-light px-0 sidebar-wrapper">
  <!-- 原有侧边栏内容保持不变 -->
  <div class="sidebar px-3">
    <h3 class="mt-4">Rental</h3>
    <h3 class="mt-2">from $99</h3>
    <p class="mb-5">per night</p>
    <form action="">
      <p><i class="fa fa-calendar-check-o pr-1"></i>Check in</p>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="DD MM YYYY" required>
      </div>
      <p class=""><i class="fa fa-calendar-o pr-1"></i>Check out</p>
      <div class="form-group">
        <input type="text" class="form-control" placeholder="DD MM YYYY" required>
      </div>
      <p class=""><i class="fa fa-male pr-1"></i>Adults</p>
      <div class="form-group">
        <input type="number" class="form-control" placeholder="1" required>
      </div>
      <p class=""><i class="fa fa-child pr-1"></i>Kids</p>
      <div class="form-group">
        <input type="number" class="form-control" placeholder="0" required>
      </div>
      <div class="form-group">
        <button type="submit" class="form-control btn btn-success w-100"><i
                class="fa fa-search pr-3"></i> Search availability</button>
      </div>
    </form>
  </div>
  <div class="hoverablediv">
    <div class="py-3 p-3"><a href="#" class="text-decoration-none text-dark"><i
                class="fa fa-building pr-1"></i>Apartment</a></div>
    <div class="py-3 p-3" data-toggle="modal" data-target="#myModal"><a href="#"
            class="text-decoration-none text-dark"><i class="fa fa-rss pr-1"></i>Subscribe</a></div>
    <div class="py-3 p-3"><a href="#" class="text-decoration-none text-dark"><i
                class="fa fa-envelope pr-1"></i>Contact</a></div>
  </div>
</div>

注意事项 #

• 如果页面有固定顶部导航，将top的值改为导航栏的实际高度即可，避免侧边栏顶部被导航遮挡
• 确保侧边栏的父元素没有设置overflow: hidden，否则sticky定位会失效
• 不需要滚动条美化的话可以直接删除对应CSS代码，不影响核心功能

内容的提问来源于stack exchange，提问作者Samuel Emeka