Twitter Bootstrap Affix - 如何坚持到底？答案

【问题标题】：Twitter Bootstrap Affix - how to stick to bottom?Twitter Bootstrap Affix - 如何坚持到底？
【发布时间】：2013-02-20 02:45:50
【问题描述】：

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

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

JS

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

SASS

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

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

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

【问题讨论】：

我遇到了同样的问题。一旦它到达底部约束，我会看到一个闪烁，并注意到它在“affix”和“affix-bottom”之间快速来回移动。你有想过吗？
不确定是否有解决方案。这个问题似乎被完全忽略了。
如果您使用的是 bootstrap 3，则在 master 中修复了一个错误，但尚未发布：github.com/twbs/bootstrap/commit/…

标签： javascript jquery css twitter-bootstrap affix

【解决方案1】：

您的代码有一些更改，但该解决方案适用于可变页眉和页脚高度、响应宽度，并且可以更改为固定页眉。

这是链接

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

问题是，当词缀到达底部时，有一个 top 和一个 bottom 的 CSS 样式添加到您的容器（#sidebar），修复的方法就是将 bottom 样式重置为 auto，这样只有 top 样式才会作用于您的容器

代码如下：

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

【讨论】：

这很好用，您可以在 CSS 中使用 auto !important 代替 jquery 处理程序中的 affix-bottom：bootply.com/PWvY5VyzSy 只是另一种选择。
谢谢哥们。我知道现在有粘性，但需要这个解决方案；）

【解决方案2】：

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

http://www.bootply.com/l95thIfavC

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

HTML

<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

【讨论】：

那么如何让它同时在顶部和底部词缀位置工作？这似乎只处理其中之一。每次我尝试同时进行这两种操作时，我都会疯狂地闪烁，因为当我接近底部时，它会在两个位置之间切换。
@michelpm，不，我肯定没有 :( 我放弃了底部词缀，因为其他人似乎都有同样的问题，而且我没有看到任何可行的解决方案来实际解决这个问题。
@ChrisBarr 我设法让它工作，css 上的底部值和插件不匹配。写的词缀要么评估为固定，要么评估为取消固定，因为两者都是正确的，在每次滚动时它都会切换固定，导致你提到的疯狂闪烁。
@ChrisBarr 我在我的回答中详细说明了让它在您的应用程序上运行的步骤。如果您喜欢在浏览器上进行检查，您可以查看 quora.com 的 upvote/downvote 按钮，它们可以完美运行。
哦，真的吗？在那种情况下，你能看看我链接的小提琴演示并指出它有什么问题吗？

【解决方案3】：

我设法让它在我的应用程序中工作，这是使底部样式与传递给附加调用的底部保持一致的问题。如果您的页脚具有固定高度并且最近定位的父级是主体，那么为两者传递相同的值就很重要了。这对于 Bootstrap 2.3 的文档来说已经足够好了，如 here 和 here 所示。

--

现在假设您没有固定高度的页脚：

第 1 步：最近定位的父级（偏移父级）

首先，我们使用绝对定位将其固定在底部，但由于您最近定位的父级将是主体（包括您的页脚），因此您没有固定的底部值。为了解决这个问题，我们必须创建一个新的定位父对象，它包含除了页脚之外的所有内容（重要：页眉也可能在外面）。将 position: relative; 设置为顶部 .container 或其祖先之一（重要：页脚必须位于此元素之后）。

第 2 步：页脚高度

现在，你的bottom是相对于它的容器而不是body，但是affix的bottom值（用来知道什么时候把词缀贴到底部）仍然是相对于body的末端，所以你必须通过它是一个计算容器后元素高度的函数，如果它只是页脚，那么这就足够了：$('footer').outerHeight(true)。

第 3 步：故障排除

现在，一切都正确了，但仍然有三件事可能导致摇杆位置不正确和疯狂闪烁：

除了页脚之外您没有考虑到的其他视觉元素，例如第二个页脚或并不总是显示，例如有用的rails-footnotes gem；
将元素附加到 DOM 的浏览器扩展，如果它们被隐藏或不在流中，那么你不应该计算它们的高度，更简单的解决方法是只计算你的应用程序知道的元素，但是扩展可能最终会破坏您的应用程序。您可以通过使用未安装扩展的浏览器或配置来测试扩展是否给您带来问题，或者只是转到“色情模式”（Chromium 上的隐身模式（Ctrl+Shift+n)，Firefox 上的隐私浏览 (Ctrl+Shift+p))如果你还没有启用扩展。
Javascript 库也会将元素附加到 DOM，您也不应该计算它们的高度。

要解决这些问题，您可以尝试使其适用于整个单词（CoffeeScript with Underscore.js）：

_($('footer').nextAll(':visible').addBack())
  .filter((el) -> el.offsetParent?)
  .reduce(((memo, el) -> memo + $(el).outerHeight(true)), 0)

同样的事情，使用 Javascript 和 jQuery.fn.each：

var sum = 0
$('footer').nextAll(':visible').each(function() {
  this.offsetParent != null && sum += $(this).outerHeight(true)
}
return sum

或者你可以只考虑你知道的元素（我更喜欢这个，我为挑战编码的另一个）：

$('footer').outerHeight(true) + ($('#footnotes_debug').outerHeight(true) || 0)

【讨论】：

【解决方案4】：

简短回答：如果您使用边框，请注意您的词缀中的内容没有使用box-sizing: border-box;。

说明：affix.js 中用于计算元素相对于文档的当前位置的 jQuery offset() 函数没有考虑边框。

注意：jQuery 不支持获取隐藏元素的偏移坐标或考虑在 body 元素上设置的边框、边距或填充。

所以如果你的词缀里面的内容有一个边框并且它的box-sizing被设置为border-box，那么高度会包括边框但偏移量不会，导致计算词缀使用稍微偏离。

【讨论】：

那么解决边界问题的方法是什么？
一个非常好的答案开始，但没有任何提示如何解决它。最糟糕的取笑我的方式。

【解决方案5】：

Paco Rivera 的解决方案有效！但不是按照他想要的方式。 Wat 真正消除了闪烁（跳跃）问题是这一行：

.on('affix.bs.affix', function () { // before affix
    $(this).css({
        'width': $(this).outerWidth()  // variable widths
    });
})

很奇怪，您甚至不必设置 CSS 宽度。只需阅读此参数即可。我将代码简化为以下片段，它仍然有效：

.on('affix.bs.affix', function () { // before affix
    $(this).width();
});

我会一直保持这种状态，直到 Bootstrap Affix 插件的下一个版本发布，我希望他们能一劳永逸地修复它。

【讨论】：

【解决方案6】：

如果您在小提琴上稍微增加窗口大小，您的小提琴似乎可以正常工作。考虑到网站在词缀中断的维度上将无法使用，您应该忽略它，或者更改布局以使用较小的空间，而不是尝试解决问题。文档中的引导词缀不用于较小的分辨率，我会效仿。

【讨论】：

【解决方案7】：

一种可能的解决方案是通过像这样设置bottom: null 来完全忽略affix-bottom 的情况：

$("#my-selector").affix({
    offset: {
        top: $("#some-thing").outerHeight(true),
        bottom: null
    }
});

【讨论】：

【解决方案8】：

只需替换引导程序中附加的代码段，如下所示。

这样——

this.$element.offset({ top: document.body.offsetHeight - offsetBottom - this.$element.height() })

这取代了它

this.$element.offset({ top: scrollHeight - offsetBottom - this.$element.height() })

干杯。

【讨论】：

【解决方案9】：

将position: absolute 设置为.affix-top 和.affix-bottom，将position: fixed 设置为.affix。

据官方doc

【讨论】：

【解决方案10】：

我通过一些试错过程完成了这项工作，但这对我有用。

JS

$(document).ready(function() {
var SidebarTop = $('#your-affix').offset().top - x; //adjust x to meet your required positioning
    SidebarBottom = $('.site-footer').outerHeight() + x;

    $('#your-affix').affix({
        offset: {
        top: SidebarTop,
        bottom: SidebarBottom
        }
    });
});

CSS

#your-affix.affix {
    top: boo px; //the px from top of the window where you want your sidebar
                 //be when you scroll
    width: foo px; //your sidebar width
  }
#your-affix.affix-bottom {
    position: absolute;
    width: foo px; //your sidebar width
}

在这段代码之后，当我的侧边栏到达页脚时，它会“取消固定”。并在到达底部偏移选项时停止跳转到站点顶部。

【讨论】：