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

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

Answer 1

我认为问题是地图部分下面没有足够的内容，因此即使地图部分通过affix插件修复，也可能发生滚动。您需要在下面填写一些内容来填充空白区域或在图形容器下方给出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);

}

错误地使用Boostrap Affix会导致页面闪烁

1 个答案: