Scrollable sidebar using Bootstrap

Bootstrapを使って、スクロール可能なサイドバーを実装

by bc_rikko

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="row">
    <div class="sidebar col-sm-3 hidden-xs">
      <p>Sidebar</p>
      <ul id="list"></ul>
    </div>
    <div class="col-sm-9 col-sm-offset-3">
      <div><p>main content</p></div>
    </div>
  </div>
</div>

CSS

.sidebar {
  display: none;
}

@media screen and (min-width: 768px) {
  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: block;
    overflow-x: hidden;
    overflow-y: auto
  }
}

JavaScript

const list = document.getElementById('list')

for (let i = 0; i < 50; i++) {
  const listItem = document.createElement('li')
  listItem.innerHTML = `list-item ${i}`
  list.appendChild(listItem)
}