<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>
.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 } }
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) }