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方法

    /* NAMESPACE */
 #define _NEDLIB_BEGIN namespace nedlib {
 #define _NEDLIB_END }

_NEDLIB_BEGIN
    #define COORD double // set type of coordinates

class vector2d
{
private:
    COORD x, y;

public:
        /* CONSTRUCTORS */
    // [...] - if it's important, i will show full class code

        /* DESTRUCTORS */
    ~vector2d();

        /* MEMBER FUNCTIONS*/
    // [...] - if it's important, i will show full class code


        /* Friend functions */
    friend vector2d operator *(const double & real, const vector2d & vector); // problem
    friend ostream & operator <<(ostream & screen, const vector2d & vector); // problem

}; /* class vector2d */


// ********************************************************************************
    /* operators */

    // vector2d operator *(const double & real, const vector2d & vector);
    // ostream & operator <<(ostream & screen, const vector2d & vector);

double RadToDeg(double);
double DegToRad(double);

_NEDLIB_END

修复它。替换为以下代码。

 using namespace nedlib;

    vector2d operator *(const double & real, const vector2d & vector)
    {
        return vector2d(vector.x * real, vector.y * real); // problem
    }

    ostream & operator <<(ostream & screen, const vector2d & vector)
    {
        screen << "(" << vector.x << ", " << vector.y << ")"; // problem
        return screen;
    }

double RadToDeg(double rad)
{
    return (180.0 * rad / M_PI);
}

double DegToRad(double deg)
{
    return (deg * M_PI / 180.0);
}

所有这些都是我错误的想法

Answer 2

当窗口处于顶部滚动位置时，似乎只会出现问题。因为只有在我们真正滚动时才会有所影响，我将以下内容应用到我的导航栏（ID=nav，将其调整到导航栏）以解决问题：

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

检查窗口是否确实在滚动。我正在从CDN加载引导程序文件，因此编辑原始文件不是一种选择。

正如@kolunar在他的回答affix.bs.affix中所指出的那样，在贴上元素之前会立即触发，因此我们可以通过返回false

Answer 3

我有几乎相同的错误。类别词缀将由词缀替换为词缀。再次单击并再次出现附加顶部。在我的情况下，它涉及词缀底部。

旧的bug还没有真正解决https://github.com/twbs/bootstrap/issues/4647#issuecomment-8769678

Answer 4

我认为有一个条件检查来设置某个地方的词缀，当偏移为零时切换状态。只需更改一个像素的底部/顶部偏移即可。在你的例子中，我更改了底部偏移：

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

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

Answer 5

希望这可以解决您的问题。

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

注意： affix.bs.affix 此事件在元素出现之前立即触发被贴上了。

Bootstrap 3 affix插件点击bug

5 个答案: