滚动到页面底部后，自举词缀停止工作 [英] Bootstrap affix stop working after scroll to bottom of the page

问题描述

我的长页带有固定的左侧边栏：

I have long page with fixed left sidebar :

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

和js用于词缀：

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

我有一个页脚，高度为 height：390px 。
当我第一次滚动到页面底部并尝试向上滚动时，侧边栏将返回其第一个位置（到页面顶部），并且它不带有 position：fixed 。它具有内联样式 position：relative ，并随Bootstrap JS添加。当我滚动到顶部时，我看到类更改为 affix-top 。每隔一个滚动页面位置，该类为 affix ，即使它位于页面底部，并且侧边栏也保持为 position：relative 。
如果仅使用：

I have and footer which is with height:390px. When I first time scroll to the bottom of the page and try to scroll up the sidebar returns to its first position (to the top of the page) and it is not with position:fixed, anymore. It is with inline style position:relative, added with Bootstrap JS. When I scroll to the top I see class changed to affix-top. Every other scroll page position, the class is affix, even if it is of the bottom of the page and sidebar stay with position:relative. If I use only :

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

，没有底部，效果很好，但由于页脚，我需要底部。

, without bottom, it works fine, but I need bottom, because of the footer.

哪里可能出问题？

推荐答案

作为文档建议将位置：绝对添加到 .affix-bottom 似乎可以解决此问题。

As the docs suggest adding position: absolute to the .affix-bottom appears to solve this problem.

因此，您需要使用CSS：

So you need the css:

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

引导

这篇关于滚动到页面底部后，自举词缀停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！