1

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

首先从词缀类删除top:0;因为它会给你带来问题。

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

1

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

2

同样的结果屁data-spy，但在完成页面后需要一些样式

为position代码添加input属性

如前。： CSS：

sticky{
position:fixed;
}

和HTML：

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

更新1

此Jquery代码可以检测滚动事件，因此当用户向下滚动时，它会使div标记变为粘性或＆＃34;附加＆＃34;

$(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 example

更新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 2

不确定您的情况是什么问题。我将您的代码复制并粘贴到带有引导程序库的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/

Answer 3

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

Bootsrap Affix无法正常工作

3 个答案:

1

2

更新1

更新1.1