jQuery Twitter Bootstrap 词缀 - 如何坚持到底？

Twitter Bootstrap Affix - how to stick to bottom?

提问by CBarr

I've read the documentation, and I feel like I'm doing exactly what they show in their examples. Yet when I try it, I can't get this to work. I'd like it to work in a way similar to the docs. It becomes position:fixedafter scrolling past the header, and then once it touches the footer it becomes position:absoluteand sticks to the bottom.

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

---

---

DEMO: http://jsfiddle.net/uvnGP/1/

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

JS

JS

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

SASS

SASS

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

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

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

回答by Paco Rivera

There some changes from your code but the solution fits for variable header and footer height, responsive width and can be change for fixed header.

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

Here is the link

链接在这里

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

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

The problem was, when the affix hit the bottom, there was a topand a bottomcss style added to your container (#sidebar), the way to fix it is to reset that bottomstyle to auto, that way only the topstyle will acto on your container

问题是，当词缀到达底部时，您的容器（#sidebar）中添加了顶部和底部css 样式，修复它的方法是将该底部样式重置为auto，这样只有顶部样式才会在您的容器上执行操作

here is the code:

这是代码：

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

回答by Zim

If you don't mind using 'data-' attributes in the markup instead of SASS, this should work:

如果您不介意在标记中使用 'data-' 属性而不是 SASS，这应该有效：

http://www.bootply.com/l95thIfavC

http://www.bootply.com/l95thIfavC

You'll also see that I removed the JS affix.

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

HTML

HTML

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

CSS

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

Update for Bootstrap 3

Bootstrap 3 的更新

To use affix-bottomyou basically need to set the height of the footer or space below the affixed element. Here's an example: http://www.bootply.com/l95thIfavC

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

回答by michelpm

I managed to make it work in my app, it is a matter of making the bottom styling consistent with the bottom passed to the affix call. If your footer have fixed height and the nearest positioned parent is the body, then it is matter of passing the same value for both. That works well enough for the Bootstrap 2.3's docs as seen hereand here.

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

--

——

Now assuming you do not have a fixed height footer:

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

Step 1: Nearest positioned parent (offset parent)

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

First of all, we use absolute positioning to stick it to the bottom, but since your nearest positioned parent will be the body (that includes your footer) you don't have a fixed value for the bottom. To fix that we have to make a new positioned parent that encloses everything but the footer (important: header will probably be outside too). Set position: relative;to either the top .containeror one of its ancestors (important: footer must be after this element).

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

Step 2: Footer height

第 2 步：页脚高度

Now, your bottom is relative to its container instead of body, but the bottom value of affix (used to know when to stick the affix to the bottom) is still relative to the end of the body, so you have to pass it a function that calculate the height of the elements after the container, if it is only the footer then this suffice: $('footer').outerHeight(true).

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

Step 3: Troubleshooting

步骤 3：故障排除

Now, you have it all correct, but three things may still cause incorrect stick position and crazy flashing:

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

1. Other visual elements besides the footer that you didn't take into account, like second footers or that are not always showing, like the useful rails-footnotes gem;

2. Browser extensions that append elements to the DOM, if they are hidden or not in the flow then you shouldn't count their height, the easier way to get around that is to count only the elements your app know, but then an extension could end up breaking your app. You could test if an extension is causing you problems by using a browser or configuration that you don't have extensions installed, or just by going to "porn mode" (Incognito on Chromium (Ctrl+Shift+n), Private Browsing on Firefox (Ctrl+Shift+p)) if you haven't enabled extensions on it.

3. Javascript libraries also append elements to the DOM, you should not count their height as well.

1. 除了页脚之外的其他视觉元素你没有考虑到，比如第二个页脚或不总是显示的，比如有用的rails-footnotes gem；

2. 将元素附加到 DOM 的浏览器扩展，如果它们隐藏或不在流中，那么你不应该计算它们的高度，解决这个问题的更简单的方法是只计算你的应用程序知道的元素，但是扩展可能会结束打破你的应用程序。您可以使用未安装扩展程序的浏览器或配置来测试扩展程序是否导致您出现问题，或者仅通过进入“模式”（Chromium 上的隐身模式（Ctrl+ Shift+ n），Firefox 上的隐私浏览（Ctrl+ Shift+ p)) 如果您还没有启用扩展。

3. Javascript 库还将元素附加到 DOM，您也不应该计算它们的高度。

To solve these you could tryto make it work with the whole word (CoffeeScript with Underscore.js):

要解决这些问题，您可以尝试使其与整个单词一起工作（CoffeeScript with Underscore.js）：

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

Same thing, with Javascript and jQuery.fn.each:

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

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

Or you could account only for the elements you know (I prefer this, the other one I coded for the challenge):

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

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

回答by Konstantin

Solution of Paco Rivera works! But not in the way he intended. Wat really removes the flickering (jumping) problem is this line:

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

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

Weired enough you don't even have to set the CSS width. Just reading this parameter helps already. I simplified the code to the following fragment and it still works:

很奇怪，您甚至不必设置 CSS 宽度。仅仅阅读这个参数就已经有帮助了。我将代码简化为以下片段，它仍然有效：

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

I will keep it like that untill the next release of Bootstrap Affix plugin, where I hope they will fix it once and for all.

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

回答by daddeo

Short answer: Beware that content inside your affix is not using box-sizing: border-box;if you are using borders.

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

Explanation: The jQuery offset()function used in affix.js to calculate the current position of the element relative to the document does not take border's into account.

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

Note: jQuery does not support getting the offset coordinates of hidden elements or accounting for borders, margins, or padding set on the body element.

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

So if the content inside your affix has a border and it's box-sizingis set to border-box, the height will include the border but the offset will not, causing the calculation affix uses to be slightly off.

因此，如果您的词缀内的内容有边框并且box-sizing设置为border-box，则高度将包括边框但偏移量不会，导致计算词缀使用稍微偏离。

回答by Rohan

Just replace the code segment for affix in bootstrap as given below.

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

This goes -

这是——

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

and this replaces it

这取代了它

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

Cheers.

干杯。

回答by Stream Huang

Set position: absolutefor .affix-top& .affix-bottom, and position: fixedfor .affix.

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

According to official doc

根据官方文档

回答by Oksana Romaniv

I made this work via some trial and error process but this is what worked for me.

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

JS

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

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
}

After this code my sidebar become "unpinned" when it reaches the footer. And stops jumping to the top of the site when it reaches the bottom offset option.

在此代码之后，我的侧边栏在到达页脚时变得“未固定”。并在到达底部偏移选项时停止跳到站点的顶部。

回答by Alexander Mistakidis

Your fiddle seems to work as desired if you increase the window size a bit on the fiddle. Considering that the website would be unusable at the dimensions where the affix breaks, you should either ignore it, or be changing the layout to work with the smaller space instead of trying to fix the problem. The bootstrap affix in the documentation isn't used for smaller resolutions, and I'd follow suit.

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

回答by CBarr

One possible solution is to completely disregard the affix-bottomsituation by setting bottom: nulllike so:

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

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