Question

我正在网站上使用Bootstrap 3。昨天，我正在研究如何使左侧边栏充当粘性边栏。这导致我采用Bootstratp Affix方法。

因此，我修改了我的网站，以使侧边栏菜单的代码现在看起来像这样：

        <div class="menu block tile-default" id="sidebarmenu" data-spy="affix" data-offset-top="195" data-offset-bottom="300">
            <div class="pad">
                <ul class="nav nav-pills nav-stacked">
                    @include('partials/menu')
                </ul>
            </div>
        </div>

还根据我读过的here添加了CSS。

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

如果您看着here：

您会看到侧边栏起初表现不错。当您滚动到底部时，侧栏菜单保持不变，然后在页脚之前开始向上移动。一切都很好。看来...

在此过程中，当我在Chrome中使用Inspector时，我看到了一些类更改。当页面未向下滚动时，div类变为

class="menu block tile-default affix-top"

向下滚动一次，该类即会变为

class="menu block tile-default affix"

然后，当您靠近页脚时，该类变为

class="menu block tile-default affix-bottom"

一切都很好。但是，当您向上滚动时，就好像功能中断了一样，词缀插件似乎也停止了工作。我读过here，“注意：由于Safari呈现错误，请勿在相对位置的元素（例如拉入或推入列）中包含的元素上使用词缀插件。”不知道这是否适用于我的情况。我不是网站开发人员。我是一名吉他手，试图进行一些修改，而这似乎使我超出了深度:-)也就是说，我可以编码，因此，如果解决方案需要编码，我可以做到这一点，只需要了解此处发生的情况即可

有人对如何使其达到预期目的有见识吗？

谢谢！

结合使用Bootstrap Affix和data-offset-bottom？了解滚动问题，但仍然遇到麻烦-想法？

0 个答案: