Bootstrap affix在滚动到页面底部后停止工作

Question

我有固定左边栏的长页面：

<div id="sidebar">
    <ul>
        <li>menu 1</li>
        <li>menu 2</li>
        <li>menu 3</li>
        <li>menu 4</li>
        <li>menu 5</li>
        <li>menu 6</li>
        <li>menu 7</li>
    </ul>
</div>

和用于affix的js

$("#sidebar").affix({offset: {top: 0, bottom:420} });

我有和页脚，这是height:390px。当我第一次滚动到页面底部并尝试向上滚动时，侧边栏返回到它的第一个位置(页面顶部)，它不再是position:fixed。它具有内联风格的position:relative，并添加了Bootstrap JS。当我滚动到顶部时，我看到类已更改为affix-top。每隔一个滚动页面的位置，类都是affix的，即使它是页面的底部和侧边栏留在position:relative上。如果我只使用：

$("#sidebar").affix({offset: {top: 0} });

，没有bottom，它工作得很好，但我需要bottom，因为footer。

问题出在哪里？

Answer 1

正如docs建议的那样，将position: absolute添加到.affix-bottom似乎可以解决这个问题。

所以你需要css：

#sidebar.affix-bottom {
  position: absolute;
}

Bootply