Bootstrap 3 affix插件点击bug

Question

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

我在这里做错了吗？这是一个错误还是按预期工作？我是否必须手动检查行的高度,如果内容较高或者有更好的方法可以避免它,则只附加工具栏？我应该提交错误报告吗？

Answer 1

这可能是一个引导错误.即使是现在也存在这个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

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

Answer 2

当窗口处于顶部滚动位置时,似乎只会出现此问题.作为一个词缀应该只有我们真正滚动时才会有所作为我将以下内容应用到我的导航栏(ID=nav将其调整到导航栏)以解决问题:

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

这检查窗口是否确实在滚动.我正在从CDN加载引导程序文件,因此编辑原始文件不是一个选项.

正如@kolunar在他的回答中指出的那样,affix.bs.affix在元素被贴上之前会立即触发,因此我们可以防止这种情况发生,因为我们还没有滚动回来false