14

TL;DR：这是一个小提琴，单击或滚动查看错误：http: //jsfiddle.net/Tetaxa/6cC9w/

我有一个包含两列的页面，右侧是一个附加的 div（工具栏），左侧是一些内容。当内容高于工具栏时，这很有效。但是，当工具栏较高时，我会遇到一些奇怪的行为。滚动并单击时，工具栏的固定状态切换并且内容折叠。

这是相关的html：

<div class="row">
    <div class="col-xs-8">
    <p>Lorem ipsum dolor</p>
    </div>
    <div class="col-xs-4">
        <div class="affixed-div">
            Affixed
        </div>
    </div>
</div>

这是我的javascript。计算底部是为了防止工具栏越过底部内容。

var div = $('.affixed-div');
var row = div.closest('.row');

div.affix({
    offset: {
        bottom: $(document).height() - row.offset().top - row.height(),
        top: div.offset().top
    }
});

这是自定义CSS：

.affix {
    top: 0;
}

.affix-bottom {
    position: relative;
}

我在这里做错了吗？它是一个错误还是按预期工作？我是否必须手动检查行的高度，并且仅在内容较高时才粘贴工具栏，还是有更好的方法来避免它？我应该提交错误报告吗？

4

5 回答 5

22

这可能是一个引导错误。这个bug现在仍然存在。

该错误在 Bootstrap 插件 Affix.js、Affix.prototype.getState 方法中

if (offsetTop != null && this.affixed == 'top') return scrollTop < offsetTop ? 'top' : false

要解决这个问题。替换为下面的代码。

if (offsetTop != null && this.affixed == 'top') return scrollTop <= offsetTop ? 'top' : false

这一切都可能是我的错误想法

于 2015-08-08T10:52:45.997 回答
13

该问题似乎仅在窗口位于顶部滚动位置时出现。作为一个词缀，只有在我们真正滚动时才会有所作为，我将以下内容应用于我的导航栏（ID=nav，将其调整为您的导航栏）来解决问题：

$( '#nav' ).on( 'affix.bs.affix', function(){
    if( !$( window ).scrollTop() ) return false;
} );

这会检查窗口是否确实在滚动。我正在从 CDN 加载引导文件，因此无法编辑原始文件。

正如@kolunar 在他的回答affix.bs.affix中指出的那样，在元素被附加之前立即触发，因此我们可以通过返回来防止在我们尚未滚动时发生这种情况false

于 2016-06-16T00:31:37.783 回答
3

我有几乎相同的错误。词缀顶部类被点击时的词缀类所取代。再次单击并重新出现 affix-top。就我而言，它涉及词缀底部。

旧错误尚未真正解决https://github.com/twbs/bootstrap/issues/4647#issuecomment-8769678

于 2013-11-15T14:31:48.040 回答
1

我认为有一个条件检查可以在某处设置词缀，当偏移量为零时切换状态。只需更改一个像素的底部/顶部偏移量即可。在您的示例中，我更改了底部偏移量，如下所示：

bottom: $(document).height() - row.offset().top - row.height() - 1

它开始正常工作。话虽如此，我不确定这是否是正确的解决方法。即使应用了这个技巧，我仍然有一些其他问题。（导航器在滚动时闪烁）。

于 2015-12-05T06:03:55.433 回答
1

希望这能解决您的问题。

    var _toolbar = $('.toolbar');
    var _content = $('.content');
    _toolbar.on('affix.bs.affix', function () {
        if (_toolbar.height() > _content.height()) {
            return false;
        }
    });

注意：affix.bs.affix 该事件在元素被附加之前立即触发。

于 2016-03-15T09:50:09.697 回答