Twitter Bootstrap Affix - 如何坚持到底？

Question

我已经阅读了文档,我觉得我正在做他们在他们的例子中展示的内容.然而,当我尝试它时,我无法让它发挥作用.我希望它以类似于文档的方式工作.它position:fixed在滚动过标题后变为,然后一旦触及页脚,它就变成position:absolute并粘在底部.

---

演示:http://jsfiddle.net/uvnGP/1/

JS

$("#account-overview-container").affix({
    offset: {
        top: $("header").outerHeight(true),
        bottom: $("footer").outerHeight(true)
    }
});

上海社会科学院

#account-overview-container {
    &.affix{
        top:10px;
        bottom:auto;
    }

    &.affix-top{
        //Do I need this?
    }

    &.affix-bottom{
        position:absolute;
        top:auto;
        bottom:140px;
    }
}

Answer 1

您的代码有一些变化,但解决方案适合可变的页眉和页脚高度,响应宽度,可以更改固定标题.

链接在这里

http://jsfiddle.net/uvnGP/131/

问题是,当词缀见底,有一个顶部和底部添加到您的容器(#sidebar),修复它是到复位的方式css样式底部风格汽车,这样,只有顶部风格将你的容器上的acto

这是代码:

var headerHeight = $('header').outerHeight(true); // true value, adds margins to the total height
var footerHeight = $('footer').innerHeight();
$('#account-overview-container').affix({
    offset: {
        top: headerHeight,
        bottom: footerHeight
    }
}).on('affix.bs.affix', function () { // before affix
    $(this).css({
        /*'top': headerHeight,*/    // for fixed height
            'width': $(this).outerWidth()  // variable widths
    });
}).on('affix-bottom.bs.affix', function () { // before affix-bottom
    $(this).css('bottom', 'auto'); // THIS is what makes the jumping
});

Answer 2

如果您不介意在标记中使用“data-”属性而不是 SASS，那么这应该可行：

http://www.bootply.com/l95thIfavC

您还会看到我删除了 JS 词缀。

超文本标记语言

<div class="well well-small affix-top" data-spy="affix" data-offset-top="150" id="account-overview-container">

CSS

body{
    position:relative;
}
header,
footer{
    background: #ccc;
    padding:40px 0;
    text-align:center;
}
header{
    margin-bottom: 10px;
}

.affix-top {
    top: 155px;
    position:absolute;
}
.affix {
    bottom:140px;
}

Bootstrap 3 更新

要使用，affix-bottom您基本上需要设置页脚的高度或附加元素下方的空间。这是一个例子： http: //www.bootply.com/l95thIfavC