Skip to content

Instantly share code, notes, and snippets.

@AllenSH12 AllenSH12/index.html
Last active Aug 29, 2015

What would you like to do?
<!DOCTYPE html>
<script src=""></script>
<meta charset="utf-8">
<meta name="description" content="a scrollable list of items with a fixed height header">
<title>JS Bin</title>
<div id="courseNavModule">
<div class="header row">
<ul class="list-group" id="courseNavHeader">
<li class="list-group-item">
<li class="list-group-item">
<input id="newCourseName" type="text" placeholder="Add Week">
<div class="body row scroll-y">
<ul class="list-group">
<li class="list-group-item">Week 1</li>
<li class="list-group-item">Week 2</li>
<li class="list-group-item">Week 3</li>
<li class="list-group-item">Week 4</li>
<li class="list-group-item">Week 5</li>
<li class="list-group-item">Week 6</li>
<li class="list-group-item">Week 7</li>
<li class="list-group-item">Week 8</li>
<li class="list-group-item">Week 9</li>
<li class="list-group-item">Week 10</li>
<li class="list-group-item">Week 11</li>
<li class="list-group-item">Week 12</li>
<li class="list-group-item">Week 13</li>
<li class="list-group-item">Week 14</li>
<li class="list-group-item">Week 15</li>
<li class="list-group-item">Week 16</li>
<li class="list-group-item">Week 17</li>
<li class="list-group-item">Week 18</li>
<li class="list-group-item">Week 19</li>
<li class="list-group-item">Week 20</li>
<li class="list-group-item">Week 21</li>
<li class="list-group-item">Week 22</li>
<li class="list-group-item">Week 23</li>
<li class="list-group-item">Week 24</li>
<li class="list-group-item">Week 25</li>
<li class="list-group-item">Week 26</li>
<li class="list-group-item">Week 27</li>
<li class="list-group-item">Week 28</li>
<li class="list-group-item">Week 29</li>
<li class="list-group-item">Week 30</li>
* {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
body {
margin: 0
.col {
overflow: hidden;
position: absolute;
.row {
left: 0;
right: 0;
.col {
top: 0;
bottom: 0;
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.header.row {
height: 95px;
top: 0;
border-bottom: 1px solid #ddd;
p {
margin: 0;
.body.row {
top: 95px;
bottom: 0;
.list-group {
margin: 0;
padding: 0;
list-style-type: none;
.list-group-item {
padding: 10px 5px;
border-top: 1px solid #ddd;
#newCourseName {
display: block;
width: 100%;
padding: 7px;
font-size: 14px;
border-radius: 4px;
border: 1px solid #ddd;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.