如何滚动.list-group离开导航栏在顶部

时间：2016-07-05 14:51:48

标签： javascript jquery html css twitter-bootstrap-3

我写了以下代码。我想只为.list-group制作滚动。如果您尝试滚动下面的代码，您会看到顶部导航栏在垂直滚动后消失。我希望它保留但.list-group滚动。试图为body和.list-group设置css设置，但似乎我做错了。我该怎么办？

（从服务器获取数据后，使用下划线模板填充.list-group）。

＆＃13;
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

这是一个解决方案，如果您修复了标头 - 请参阅下面的CSS代码注释。

或者，您可以将固定高度应用于.list-group，例如500px然后它也会为你滚动。

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>

相关问题
最新问题