html - Bootstrap Affix 不起作用

Question

我已经为 Bootstrap 和 data-spy 属性添加了库，当我向下滚动页面时，我想在其中修复 div。但它不起作用，我几乎尝试了所有方法，但无法找出问题所在。是不是像 data-spy 属性在 class = "row"上不起作用？这是我的 HTML 代码。

<div class="row">
           <h4> HEADING </h4>
           <h5>
            <div class="row" data-spy="affix" data-offset-top="10">
            dsds
                Date : <input type="date" name="graph_date" id="graph_date">
            </div>
            <div class="row">
                <div class="graph-hourly">
                    <div class="loader" id="chart_loader">
                        <p>Loading...</p>
                    </div>
                    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
                    <div id="chart_hourly"></div>
                </div>
            </div>
       </div>

和一些CSS:

.affix {
  top : 0;
  width: 80%;
}

在搜索了一些解决方案之后，我也添加了这个，

.affix-top {
  width: 100%;
}

.affix-bottom {
  position: absolute;
  width: 100%;  
}

但是这个解决方案也不适合我。

Answer 1

不确定你的问题是什么。我使用 Bootstrap 库将您的代码复制并粘贴到 jsfiddle 中，词缀类确实有效。不过，它的效果很差，因为它会在您开始滚动时立即附加该行。

看起来 Bootstrap 无法将偏移量设置为元素的当前位置，因此我添加了以下 javascript 以使其工作。

$('#affix-this').affix({
    offset: {
      top: $('#affix-this').offset().top
    }
 })

(#affix-this 应更改为您要附加的行的 id。)

注意 $('#affix-this').offset().top。这可确保当您到达元素的当前位置时，该元素会正确附加。

其次，我删除了您用于附加的 html 属性。

<div class="row">
    <h4> HEADING </h4>
    <div class="row" id="affix-this">
        dsds Date :
        <input type="date" name="graph_date" id="graph_date">
    </div>
    <div class="row">
    <div class="graph-hourly">
      <div class="loader" id="chart_loader">
        <p>Loading...</p>
      </div>
      <div id="chart_hourly"></div>
    </div>
</div>

请注意 affix-this id 已添加到您要附加的行。

这是一个包含这些更改的工作 JSFiddle，因此您可以看到它的实际效果:https://jsfiddle.net/heraldo/6s4u26m3/4/