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

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

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

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>

来源

2016-07-05 maximus

这里有一个解决方案，如果您修复到位标题 - 见下面我的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>

来源

2016-07-05 15:00:21 mattpark22

伟大的作品，但有一个问题的。尝试运行您的代码段，然后按全屏（并调整窗口大小，以便出现滚动条）。导航栏宽度太短。所以部分滚动显示在导航的右侧。酒吧。 – maximus

我已经将width：100％添加到了#header现在，并且解决了您提到的问题:) – mattpark22

对不起，我也试过了，但导航栏的底部行直到窗口结束尝试使窗口的大小水平足够长）:) – maximus

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

回答

相关问题