jquery - Bootstrap 词缀跳转

标签 jquery twitter-bootstrap affix

我希望在页面滚动时将图像粘贴到右侧,并且我已为此过程选择了 Bootstrap 附加

http://jsfiddle.net/7rhdLcz7/

$(function () {

    $('#image').affix({
        offset: {
            top: 200,
            bottom: 200
        }
    });
});

我遇到的唯一问题是图像在滚动过程中跳到屏幕中心,然后又弹回到底部 - 有解决这个问题的方法吗? 其中包含演示 jsfiddle 的链接。

最佳答案

您要求将图像固定在距离顶部 200 像素和距离底部 200 像素之间。

如果你想让图像粘在右下角,请使用#image css

例如:

JS

$(function () {
    $('#nav-wrapper').height($("#nav").height());

    $('#nav').affix({
        offset: {
            top: $('#nav').offset().top
        }
    });

    $('#image').affix({
        offset: {
            top: 200
        }
    });
});

CSS

#image {
    top:0;
    bottom: 200px;
    right:0;
}

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}
#nav > .navbar-inner {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}

关于jquery - Bootstrap 词缀跳转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26550862/

相关文章:

javascript - 美元符号 jquery 作为字符串 : unterminated string literal

javascript - 使用 javascript/jquery 对 JSON 数据进行分组/排序

css - asp.net mvc 5 - StyleBundle CdnFallbackExpression 问题?

javascript - Bootstrap 3 - 词缀不改变类

javascript - 调整大小时不会重新计算附加位置

javascript - 打开时灯箱尺寸不正确

Javascript 在两次 HTML 注入(inject)后停止工作

javascript - Bootstrap Affix 的替代方案

html - 在 anchor 标签周围出现蓝色边框的模式结束时

html - 如何在 Bootstrap 导航栏中显示水平子菜单?