Bootstrap Progressbar Affix works but remains under all other components

Question

Desired result: I use a progress bar that I would like to keep visible when scrolling down.

Action taken: I used Affix on the entire section containing the the progressbar components.

Current result: It seems to work, but the scrollbar is under all other components, so desappear behind them when scrolling.

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

Here is the behavior in jsfiddle:
https://jsfiddle.net/AJNOURI/07ckpj1h/

score 0 · Accepted Answer · answered Oct 26 '16 at 23:48

0

Should have used the CSS Stacking Elements in Layers Using z-index Property z-index

  .affix {
      top: 1;
      width: 100%;
      z-index: 1;
  }

Updated https://jsfiddle.net/AJNOURI/07ckpj1h/2/

answered Oct 26 '16 at 23:48

AJN

1,196
2
19
47

Bootstrap Progressbar Affix works but remains under all other components

1 Answers1