引导词缀不起作用

Question

我已经添加了 Bootstrap 和 data-spy 属性的库，我想在向下滚动页面时在其中进行div 修复。但是它不起作用，我几乎尝试了所有方法，但无法找出问题所在。是像数据间谍属性在类="行"上不起作用的东西吗？这是我的 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

不确定您的情况是什么问题。我使用引导库将您的代码复制并粘贴到 jsfiddle 中，并且 affix 类确实有效。不过，它的效果很糟糕，因为它在您开始滚动时就贴上了该行。

看起来 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/

Answer 2

首先从后缀类中删除top:0;，因为它会给您带来问题。

现在你有两种方法选择一个：

1

添加data-spy="affix"对我来说效果很好

阿拉伯数字

相同的结果屁股data-spy但完成页面后您将需要一些样式

通过为input标记添加position属性

例如：.CSS：

sticky{
position:fixed;
}

和 HTML ：

<input type="date" name="graph_date" class="sticky" id="graph_date">

更新 1

这个Jquery代码可以检测滚动事件，所以当用户向下滚动时，它会使div标签粘滞或"词缀"

$(function() {
  $(window).scroll(function() {
    var aTop = "100";
    if ($(this).scrollTop() >= aTop) {
     $('#affix-this').css( "position", "fixed" );
     $('#affix-this').css( "top", "0" );
     $('#affix-this').css( "width", "100%" );
    }
  });
});

将aTop变量更改为所需的高度（以像素为单位），以便当用户向下滚动 100px 时，div 变得粘滞

一个 JSfiddle 示例

1.1 更新

更聪明一点的Jquery代码做同样的事情，但从另一个元素自动获取高度，如果您将页面格式化为与此类似的格式，这可能会很好

$(function() {
  $(window).scroll(function() {
    var aTop = $('id').height();
    if ($(this).scrollTop() >= aTop) {
     $('#affix-this').css( "position", "fixed" );
     $('#affix-this').css( "top", "0" );
     $('#affix-this').css( "width", "100%" );
    }
  });
});

Answer 3

在加载 Bootstrap 脚本之前，请确保在 DOM 中创建了要添加data-spy="affix元素。我遇到了一个问题，我在 HTML 中添加data-spy="affix"，但由于data-ng-if，它被包装在一个没有渲染的部分。我的 HTML 是在 Bootstrap 加载后创建的，因此我想粘在屏幕顶部的<div>从未停留在固定位置。如果可以，请使用 data-ng-show ，或者仅隐藏 HTML 的内容，而不是阻止在页面加载时创建它。