Bootstrap 3词缀插件点击错误 [英] Bootstrap 3 affix plugin click bug

问题描述

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

TL;DR: Here is a fiddle, click or scroll to see the bug: http://jsfiddle.net/Tetaxa/6cC9w/

我有一个包含两列的页面，右边是粘贴的div(工具栏)，左边是一些内容.当内容高于工具栏时，这非常有用.但是，当工具栏更高时，我会得到一些奇怪的行为.滚动并单击时，工具栏的附加状态会切换，内容会折叠.

I have a page with two columns, on the right is an affixed div (a toolbar) and on the left is some content. This works great when the content is higher than the toolbar. However, when the toolbar is higher, I get some weird behavior. On scroll and click, the toolbar's affixed state toggles and the content collapses.

以下是相关的html:

Here's the relevant 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.计算底部是为了防止工具栏移到底部内容上.

Here is my javascript. The bottom is calculated to prevent the toolbar from going over the bottom content.

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

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

Am I doing something wrong here? Is it a bug or working as intended? Do I have to manually check the height of the row and only affix the toolbar if the content is higher or is there a better way to avoid it? Should I file a bug report?

推荐答案

这可能是引导程序错误. 该错误甚至现在仍然存在.

It's maybe a bootstrap bug. The bug exists even now.

错误是 在Bootstrap插件Affix.js，Affix.prototype.getState方法中

The bug is in the Bootstrap plugin Affix.js, Affix.prototype.getState methods

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

要修复它.替换为以下代码.

To fix it. replace to below code.

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

所有这些可能是我的错误想法

All this can be my wrong thought

这篇关于Bootstrap 3词缀插件点击错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！