maximus maximus - 5 months ago 36
HTML Question

How to scroll .list-group leaving navigation bar at top

I wrote the following code. I want to make the scroll only for the .list-group. If you try scrolling the code below, you will see that the top navigation bar disappears after scrolling vertically. I want it to stay but the .list-group to scroll. Tried to set up the css settings for body and .list-group, but seems like I'm doing it wrong. How can I do it?

(The .list-group is filled using underscore template after fetching the data from server).



body {
overflow-y: auto;
height: 100%;
}
.list-group {
max-height: 100%;
overflow-y: scroll;
}
.container {} .nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
color: #555555;
cursor: default;
background-color: #4ab4c5;
border: 1px solid #dddddd;
border-bottom-color: transparent;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container" id="main_container">
<h2><span class="label label-primary">CONFERENCE</span></h2>
<ul class="nav nav-tabs nav-tabs-responsive">
<li class="active"><a data="1" data-toggle="tab" href="#menu1">Simposium Sessions</a>
</li>
<li><a data-toggle="tab" href="#menu2">Poster Sessions</a>
</li>
<li><a data-toggle="tab" href="#menu3">Exhibitors</a>
</li>
<li><a data-toggle="tab" href="#menu4">Sightseeing Schedule</a>
</li>
<li><a data-toggle="tab" href="#menu5">History</a>
</li>
<li><a data-toggle="tab" href="#menu6">INFORMATION</a>
</li>
</ul>

<div id="tabs" class="tab-content">
<div id="menu1" class="tab-pane fade in active">
<h3>Simposium Sessions</h3>
<div id="abstracts_oral">
<div class="list-group">

<a class="list-group-item" data-id="0">
<h4 class="list-group-item-heading"><span class="text-center">topic </span></h4>
<p class="list-group-item-text">Author:it humanity raillery an unpacked as he.</p>
<p class="list-group-item-text">Time:12:12</p>
<p class="list-group-item-text">Room Number:DK-300</p>
</a>

<a class="list-group-item" data-id="1">
<h4 class="list-group-item-heading"><span class="text-center">topic </span></h4>
<p class="list-group-item-text">Author:it humanity raillery an unpacked as he.</p>
<p class="list-group-item-text">Time:12:12</p>
<p class="list-group-item-text">Room Number:DK-300</p>
</a>

<a class="list-group-item" data-id="2">
<h4 class="list-group-item-heading"><span class="text-center">topic </span></h4>
<p class="list-group-item-text">Author:it humanity raillery an unpacked as he.</p>
<p class="list-group-item-text">Time:12:12</p>
<p class="list-group-item-text">Room Number:DK-300</p>
</a>

<a class="list-group-item" data-id="3">
<h4 class="list-group-item-heading"><span class="text-center">topic </span></h4>
<p class="list-group-item-text">Author:it humanity raillery an unpacked as he.</p>
<p class="list-group-item-text">Time:12:12</p>
<p class="list-group-item-text">Room Number:DK-300</p>
</a>

<a class="list-group-item" data-id="4">
<h4 class="list-group-item-heading"><span class="text-center">topic </span></h4>
<p class="list-group-item-text">Author:it humanity raillery an unpacked as he.</p>
<p class="list-group-item-text">Time:12:12</p>
<p class="list-group-item-text">Room Number:DK-300</p>
</a>

<a class="list-group-item" data-id="5">
<h4 class="list-group-item-heading"><span class="text-center">topic </span></h4>
<p class="list-group-item-text">Author:it humanity raillery an unpacked as he.</p>
<p class="list-group-item-text">Time:12:12</p>
<p class="list-group-item-text">Room Number:DK-300</p>
</a>

<a class="list-group-item" data-id="6">
<h4 class="list-group-item-heading"><span class="text-center">topic </span></h4>
<p class="list-group-item-text">Author:it humanity raillery an unpacked as he.</p>
<p class="list-group-item-text">Time:12:12</p>
<p class="list-group-item-text">Room Number:DK-300</p>
</a>




</div>
</div>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Poster Sessions</h3>
<div id="abstracts_poster">

</div>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Exhibitors</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu4" class="tab-pane fade">
<h3>Sightseeing Schedule</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div id="menu5" class="tab-pane fade">
<h3>History</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div id="menu6" class="tab-pane fade">
<h3>Info</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>




Answer

Here's one solution, if you fix the header in place - see my CSS code comments below.

Alternatively you could apply a fixed height to .list-group, e.g. 500px and then it would scroll also for you.

body {
  overflow-y: auto;
  height: 100%;
  padding-top: 155px; /* set this to your header height */
}
.list-group {
  max-height: 100%;
  overflow-y: scroll;
}
.container {} .nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #555555;
  cursor: default;
  background-color: #4ab4c5;
  border: 1px solid #dddddd;
  border-bottom-color: transparent;
}
#header {
  position: fixed; /* keep at the top of the page */
  height: 155px; /* header height */
  width: 100%; /* required to fill the page width */
  top: 0; /* stay at the top of the page */
  left: 0; /* stay on the left of the page */
  padding: 0 15px; /* match padding on bootstrap */
  z-index: 10; /* make the header sit on top */
  background: white; /* transparent background won't look right here */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="container" id="main_container">
<div id="header">
  <h2><span class="label label-primary">CONFERENCE</span></h2>
  <ul class="nav nav-tabs nav-tabs-responsive">
    <li class="active"><a data="1" data-toggle="tab" href="#menu1">Simposium Sessions</a>
    </li>
    <li><a data-toggle="tab" href="#menu2">Poster Sessions</a>
    </li>
    <li><a data-toggle="tab" href="#menu3">Exhibitors</a>
    </li>
    <li><a data-toggle="tab" href="#menu4">Sightseeing Schedule</a>
    </li>
    <li><a data-toggle="tab" href="#menu5">History</a>
    </li>
    <li><a data-toggle="tab" href="#menu6">INFORMATION</a>
    </li>
  </ul>
</div>
  <div id="tabs" class="tab-content">
    <div id="menu1" class="tab-pane fade in active">
      <h3>Simposium Sessions</h3>
      <div id="abstracts_oral">
        <div class="list-group">

          <a class="list-group-item" data-id="0">
            <h4 class="list-group-item-heading"><span class="text-center">topic </span></h4>
            <p class="list-group-item-text">Author:it humanity raillery an unpacked as he.</p>
            <p class="list-group-item-text">Time:12:12</p>
            <p class="list-group-item-text">Room Number:DK-300</p>
          </a>

          <a class="list-group-item" data-id="1">
            <h4 class="list-group-item-heading"><span class="text-center">topic </span></h4>
            <p class="list-group-item-text">Author:it humanity raillery an unpacked as he.</p>
            <p class="list-group-item-text">Time:12:12</p>
            <p class="list-group-item-text">Room Number:DK-300</p>
          </a>

          <a class="list-group-item" data-id="2">
            <h4 class="list-group-item-heading"><span class="text-center">topic </span></h4>
            <p class="list-group-item-text">Author:it humanity raillery an unpacked as he.</p>
            <p class="list-group-item-text">Time:12:12</p>
            <p class="list-group-item-text">Room Number:DK-300</p>
          </a>

          <a class="list-group-item" data-id="3">
            <h4 class="list-group-item-heading"><span class="text-center">topic </span></h4>
            <p class="list-group-item-text">Author:it humanity raillery an unpacked as he.</p>
            <p class="list-group-item-text">Time:12:12</p>
            <p class="list-group-item-text">Room Number:DK-300</p>
          </a>

          <a class="list-group-item" data-id="4">
            <h4 class="list-group-item-heading"><span class="text-center">topic </span></h4>
            <p class="list-group-item-text">Author:it humanity raillery an unpacked as he.</p>
            <p class="list-group-item-text">Time:12:12</p>
            <p class="list-group-item-text">Room Number:DK-300</p>
          </a>

          <a class="list-group-item" data-id="5">
            <h4 class="list-group-item-heading"><span class="text-center">topic </span></h4>
            <p class="list-group-item-text">Author:it humanity raillery an unpacked as he.</p>
            <p class="list-group-item-text">Time:12:12</p>
            <p class="list-group-item-text">Room Number:DK-300</p>
          </a>

          <a class="list-group-item" data-id="6">
            <h4 class="list-group-item-heading"><span class="text-center">topic </span></h4>
            <p class="list-group-item-text">Author:it humanity raillery an unpacked as he.</p>
            <p class="list-group-item-text">Time:12:12</p>
            <p class="list-group-item-text">Room Number:DK-300</p>
          </a>




        </div>
      </div>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Poster Sessions</h3>
      <div id="abstracts_poster">

      </div>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Exhibitors</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu4" class="tab-pane fade">
      <h3>Sightseeing Schedule</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
    <div id="menu5" class="tab-pane fade">
      <h3>History</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
    <div id="menu6" class="tab-pane fade">
      <h3>Info</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>