微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jquery – Bootstrap 3贴上插件点击bug

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

在这里做错了吗?这是一个错误还是按照预期工作?我必须手动检查行的高度,只有在内容较高的情况下才贴上工具栏,还是有更好的方法来避免?我应该提交错误报告吗?

解决方法

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

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

原文地址:https://www.jb51.cc/jquery/180127.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐