【问题标题】:Bootstrap affix is always "jumping"引导词缀总是“跳跃”
【发布时间】:2012-11-18 14:49:24
【问题描述】:

我想在侧边栏使用 bootstrap 的词缀插件。然而,由于我的网站是响应式的,它总是在某些方面跳跃,我无法让它正常工作。我尝试了此处列出的解决方案:How to use the new affix plugin in twitter's bootstrap 2.1.0?,但这不仅仅是工作。

Here's a demo

我知道如何在具有固定宽度的网站上做到这一点,但我的网站响应式的 bootstrap 文档也是如此,因为它完美地工作there,我如何达到同样的效果?

因为这可能永远行不通

.affix {
    position: fixed; 
    top: 20px; 
    right: 10%;
}

【问题讨论】:

    标签: javascript twitter-bootstrap responsive-design sidebar


    【解决方案1】:

    当我使用它时,我的.affix 类只有position:fixed,没有别的。可以使用offset 选项在affix() 方法中设置附加元素的顶部位置,例如

    $("#nav_id").affix({
        offset: 400
    });
    

    【讨论】:

    • 所以换句话说,不要在你的 CSS 中设置 topright 样式,使用 offset 选项设置 top,不要担心设置right 风格。看看是否有帮助。顺便说一句,您的演示链接只是转到一个空白页面...
    • 好吧,现在它不会在页面上滚动了。
    • 那么还有其他问题。删除 CSS 不会阻止 Bootstrap 的 JavaScript 工作。听起来词缀甚至没有被初始化,只是你的 CSS 修复了元素。
    • 好的,那么词缀类被添加到元素中了吗?如果是这样,那么词缀就起作用了。但是您仍然不需要在 CSS 中设置 topright 属性。我现在在一个网站上工作,我所有的.affix CSS 类都是position:fixed
    • 添加了词缀类,但它在激活时总是在跳跃,如果我设法让它在一个分辨率上正常工作,那么在另一个分辨率上就太可怕了。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-10-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多