错误使用 Bootstrap Affix，导致页面闪烁

Question

我正在尝试使用Bootrap Affix 将我的地图的 CSS 位置属性更改为固定 - 一旦用户将页面滚动到某个点。这个想法是使用 Bootstrap 数据属性使我的地图成为“粘性 CSS”内容。

见JSFiddle我的问题演示。

当我希望<div class=".graphic-container"> 内容固定在页面上时，一旦用户滚动到<ul class =".election-navigation"> 正下方的某个点，页面就会跳转/重置。

我已经尝试了许多关于 S.O. 相关问题的解决方案。不成功。

相关代码：

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

.graphic-containter{
    height:500px;
}


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

更新：我应该注意我使用的用户体验逻辑是用户需要向下滚动才能正确查看整个地图。但是 Nav[number] 改变了地图中的数据，所以它需要保持可见

Answer 1

我认为问题在于地图部分下方没有足够的内容，因此即使地图部分已被词缀插件修复，滚动也会发生。您需要在下面有一些内容来填充空白空间或在图形容器下方提供一个 div 高度来解决问题。

希望这能解决您的问题

请在此处查看代码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：（现有CSS中需要添加和修改的）

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

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

}