2016-10-26 10 views
0

希望の結果: 私はスクロールダウン時に表示しておきたいプログレスバーを使用します。Bootstrap Progressbar Affixは他のすべてのコンポーネントの下に残ります。

取られたアクション: 私は、プログレスバーコンポーネントを含むセクション全体に貼り付けを使用しました。

現在の結果: スクロールバーは他のすべてのコンポーネントの下にあります。スクロールバーはスクロールすると表示されません。ここで

<html> 

    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <style> 
     .affix { 
      top: 1; 
      width: 100%; 
     } 

     .affix + .container-fluid { 
      padding-top: 70px; 
     } 
    </style> 
    <script> 
     $(document).ready(function(){ 

       }); 
    </script> 
    </head> 

    <body> 
    <div class="container"> 
     <h2 class="text-center">Title</h2> 
     <div class="panel-group" id="accordion"></div> 
    </div> 
    <div class="section" data-spy="affix" data-offset-top="20"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div class="progress" id="progressbarid"> 
       <div class="progress-bar" role="progressbar" style="width: 0%;"></div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="section"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"></div> 
     </div> 
     </div> 
    </div> 

    <div class="section"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div class="panel panel-primary" id="keystone-sectionid"> 
       <div class="panel-heading"> 
       <h3 class="panel-title">Section1</h3> 
       </div> 
       <div class="panel-body"></div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    <div class="section"> 
     <div class="container"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <div class="panel panel-primary" id="compute-sectionid"></div> 
      <div class="panel panel-primary" id="glance-sectionid"> 
       <div class="panel-heading"> 
       <h3 class="panel-title">Section2</h3> 
       </div> 
       <div class="panel-body"></div> 
      </div> 
      <div class="panel panel-primary" id="cinder-sectionid"> 
       <div class="panel-heading"> 
       <h3 class="panel-title">Section3</h3> 
       </div> 
       <div class="panel-body"></div> 
      </div> 
      <div class="panel panel-primary" id="heat-sectionid"> 
       <div class="panel-heading"> 
       <h3 class="panel-title">Section4</h3> 
       </div> 
       <div class="panel-body"></div> 
      </div> 
      </div> 
     </div> 
     </div> 
    </div> 
    </body> 

</html> 

はjsfiddleで動作です:
https://jsfiddle.net/AJNOURI/07ckpj1h/

答えて