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

Question

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

有关我的问题的演示，请参阅 JSFiddle。

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

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

我认为问题在于地图部分下方没有足够的内容，因此即使地图部分已被词缀插件修复，滚动也会发生。您需要在下方添加一些内容来填充空白 space 或在图形容器下方提供 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);

}

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

Using Boostrap Affix incorrectly, resulting in page flicker

twitter-bootstrap

affix