Using Boostrap Affix incorrectly, resulting in page flicker

Question

I am trying to use Bootrap Affix to change the CSS position property of my map to fixed -- once the user to scrolls the page up to a certain point. The idea is to make my map "sticky CSS" content, using the Bootstrap data attributes.

See JSFiddle for demo of my problem.

Right when I expect the <div class=".graphic-container"> content to become fixed to the page, once the user scrolls to a point directly below the <ul class =".election-navigation">, the page jumps/resets.

I have tried many of the solutions to related questions on S.O. unsuccessfully.

The relevant code:

<div class="graphic-containter" data-spy="affix" data-offset-top="150">

.graphic-containter{
    height:500px;
}


.affix {
    width:100%;
    top: 50px;
 }

UPDATE: I should note the UX logic I am using is that the user needs to scroll down to properly view entire map. But the Nav[number] changes the data in the map, so it needs to remain visible

I am trying to use the Bootstrap Affix to change the .graphic-container div to position:fixed once it reaches the .election-navigation div - as found in docs: http://getbootstrap.com/javascript/#affix — CCantey, Aug 29 '16 at 15:46
If you view the JSFIddle, you will see how the page jumps when it hits the data-offset, rather than "sticking" to the page at that point — CCantey, Aug 29 '16 at 15:49

score 1 · Accepted Answer · answered Aug 29 '16 at 20:30

I think the problem is of not having enough content below map section, so that the scroll can happen even if the map section got fixed by affix plugin. You need to have some content below to fill the empty space or give a div height below graphic container to resolve the issue.

I hope this will fix your issue

Please check the code here CODEPEN

HTML:

<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div id="navbar" class="navbar-center">
      <h5><a href="#">Title</a></h5>
      <h5><image src="img/ballot-box.jpg"/>Subtitle</h5>
    </div>
    <!--/.nav-collapse -->

  </div>
</nav>

<div class="container">
  <div class="row">
    <div class="col-sm-2"></div>
    <div class="col-sm-8 election-districts">
      <ul class="election-navigation">
        <li><a class="election-navigation-a active" data-district="USPRS" data-geography="cty" data-name="COUNTYNAME">Nav 1</a></li>
        <li><a class="election-navigation-a" data-district="USSEN" data-geography="cty" data-name="COUNTYNAME">Nav 2</a></li>
        <li><a class="election-navigation-a" data-district="USREP" data-geography="cng" data-name="CONGDIST">Nav 3</a></li>
        <li><a class="election-navigation-a" data-district="MNSEN" data-geography="sen" data-name="MNSENDIST">Nav 4</a></li>
        <li><a class="election-navigation-a" data-district="MNLEG" data-geography="hse" data-name="MNLEGDIST">Nav 5</a></li>
      </ul>
    </div>
    <div class="col-sm-2"></div>


    <div class="headline">
      <h1 class="headline-title">Bootstrap Starter Template.</h1>
      <p class="lead">Use this document as a way to quickly start any new mapping project.<br> It provides this text, sidebar navigation, and a Mapbox GL map.</p>
    </div>


    <!-- <div class="col-sm-1"></div> -->
    <div class="col-sm-12">
      <div class="row">
        <div class="graphic-containter" data-spy="affix" data-offset-top="150">

          <div class="col-sm-3 sidebar">
            <div class="sidebar-results">
              <h4> Minnesota Results</h4>
            </div>

            <div class="sidebar-search">
              <div class="input-group">
                <label for="address">Find your precinct</label>
                <input type="text" id="address" class="form-control" placeholder="Enter address">
                <span class="input-group-btn">
                <button id="search" class="btn btn-default" type="button"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></button>
                </span>
              </div>
              <!-- /input-group -->
            </div>


            <div class="sidebar-multiple-maps">
              <table id='features' class="table-condensed"></table>
            </div>
          </div>
          <div id="map" class="col-sm-9 map-container"></div>
        </div>
      </div>
    </div>
    <!-- <div class="col-sm-1"></div> -->
  </div>
  <div class="container-fluid" style="height:1000px">
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
    <h1>Some text to enable scrolling</h1>
  </div>
  <footer class="footer">
    footer.
  </footer>

</div>
<!-- /.container -->

CSS:( that need to be added and modified in existing CSS )

.graphic-containter.affix{
    background-color:rgba(255,255,255,0.85);      
}

.affix {
    top:85px;
    width: calc(85% - 14px);

}

I had just come to an alternative solution by affixing the sidebar alone - but this answers my original question perfectly - thanks — CCantey, Aug 29 '16 at 20:57

Using Boostrap Affix incorrectly, resulting in page flicker

1 Answers1