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

SASS

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

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

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

score 15 · Accepted Answer

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

链接在这里

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

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

这是代码：

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

score 3 · Accepted Answer

如果您不介意在标记中使用“数据-”属性而不是 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

score 1 · Accepted Answer

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

--

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

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

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

第 2 步：页脚高度

现在，你的底部是相对于它的容器而不是 body，但是 affix 的底部值（用于知道何时将词缀贴到底部）仍然是相对于 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)

score 1 · Accepted Answer

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

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

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

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

score 1 · Accepted Answer

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 插件的下一个版本发布，我希望他们能一劳永逸地修复它。

score 0 · Accepted Answer

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

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

这是 -

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

这取代了它

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

干杯。

score 0 · Accepted Answer

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

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
}

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

score 0 · Accepted Answer

0

position: absolute为.affix-top&.affix-bottom和设置。position: fixed_.affix

根据官方文档

于 2016-08-03T08:54:02.870 回答

javascript - Twitter Bootstrap Affix - 如何坚持到底？

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

JS

SASS

10 回答 10

Related

Reference