スクロールする方法.list-group上部にナビゲーションバーを残す

Question

次のコードを書きました。 .list-groupだけのスクロールをしたい。下のコードをスクロールすると、上下にスクロールした後に上のナビゲーションバーが消えることがわかります。私はそれを残したいが、.list-groupはスクロールする。 bodyと.list-groupのCSS設定を設定しようとしましたが、間違っているようです。どうしたらいいですか？

（.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>

Answer 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>