maximus
Reputation: 4302
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>Upvotes: 0
Views: 617
Answers (1)
mattpark22
Reputation: 751
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>Upvotes: 1
Related Questions
- bootstrap list group scroll
- How can I fix the bootstrap navbar to the top after a div was scrolled?
- Bootstrap 4 scrollspy with list-group doesn't work
- Navbar link scroll to top
- Fix Bootstrap Navbar to top on scrolling
- How To Set Bootstrap Navigation Menu To Stays At Top Of The Page While Scrolling
- Moving navigation bar to the top while scrolling down in HTML
- Bootstrap Fixing navigation bar on top when scrolling
- Making list-group full-width - hortizontal scrollbar appears
- twitter bootstrap nav : need to create scroll bar when not collapsing