当窗口高度窄时如何防止在引导词缀中跳跃？答案

【问题标题】：How to prevent jumping in bootstrap affix when window is narrow height?当窗口高度窄时如何防止在引导词缀中跳跃？
【发布时间】：2017-07-05 14:39:06
【问题描述】：

当搜索结果少于页面高度时，页面高度变窄，并且在滚动时附加侧边栏正在跳跃。我试图使主容器的最小高度大于侧边栏，但它看起来不太好。窗口高度窄时如何禁用 affix-bottom 或变通以防止跳转？

模板展示了我当前的应用程序：jsfiddle

JS：

$('#sidebar').affix({});

HTML：

<div id="nav" class="navbar"></div>
<div id="content" class="container">
    <div class="row">
        <div class="col-sm-7 col-md-7 main"></div>
        <div class="col-sm-5 col-md-5">
            <div class="sidebar-fixed" data-spy="affix" data-offset-top="60" data-offset-bottom="50" id="sidebar"></div>
        </div>
    </div>
</div>
<footer class="container"></footer>

CSS：

body {
    position: relative;
}
.navbar {
    height: 60px;
    background-color: #dce7ed;
}
.main {
    background-color: #9fc8e3;
    height: 390px;
    margin-top: 60px;
}
#sidebar {
    background-color: #d5cbc6;
    height: 400px;
    margin-top: 60px;
}
#sidebar.affix-top {
    position: static;
}
#sidebar.affix {
    position: fixed;
    top: 20px;
    width: 283px;
}
#sidebar.affix-bottom {
    position: absolute;
    /* bottom: 50px; */
    top: auto;
    bottom: 50px;
}
footer {
    height: 50px;
    background-color: #dce7ed;
}

【问题讨论】：

你的意思是当尺寸改变时你不希望它从根本上“跳跃”并希望它是一个平稳的过渡？
我想防止跳跃。当窗口太小时，我想到了降低侧边栏的高度。
我不是 100% 确定，但我认为您要求对媒体查询进行过渡以获得平滑效果。 CSS Tricks 在Here 上有一个很好的教程，我个人在 David Walsh 的另一篇文章中加入了一些关于屏幕调整大小的过渡和动画。你可以阅读它Here
希望这是解决问题的好主意。我会检查这个解决方案。谢谢。
我尝试使用@media(max-height: 400px)，这是一个不好的解决方案。

标签： html css twitter-bootstrap-3 affix

【解决方案1】：

在设置词缀之前检查.main的高度是否足够大。

if ($(.main).first().innerHeight() > someNumber)
    $(#sidebar).affix({})

然后确保删除自动初始化词缀的data-spy="affix"。

<div class="sidebar-fixed" data-offset-top="60" data-offset-bottom="50" id="sidebar"></div>

【讨论】：

【解决方案2】：

你会用JS吗？为什么不读取元素的高度，如果搜索结果小于侧边栏，则禁用词缀？

您还可以在窗口调整大小时添加一个事件，以重新检查大小并根据需要启用/禁用它。

希望对你有帮助。

【讨论】：

我尝试通过 '$(window).off('.affix')' 禁用调整大小事件中的词缀，它带来了预期的效果，但我无法启用词缀。
那你必须研究一下。从官方文档开始，看看他们是怎么做的。我现在没有时间寻求帮助，抱歉。

【解决方案3】：

实际上没有必要使用添加或删除词缀的脚本使事情变得过于复杂。事实上，由于您已经通过标记启用了词缀，您不需要再次通过脚本来执行此操作。这是我为说明它所做的一个简单的小提琴：（您可以忽略脚本中的所有内容，因为这些按钮用于切换主面板的高度）

简单模板：http://jsfiddle.net/LYgam/8/

对于您的模板，我尝试在词缀发生之前删除脚本并为原始侧边栏添加宽度，这对我来说效果很好：

#sidebar {
    background-color: #d5cbc6;
    height: 400px; width: 283px;
    margin-top: 60px;
}

您的模板已修改：http://jsfiddle.net/LYgam/9/

虽然您可能希望在单独的窗口中加载页面，或者将 jsfiddle 中的预览窗格设置得非常大，以便在响应式容器不折叠所有内容的情况下查看实际情况。

【讨论】：

我在这个问题上迷失了很多时间，但这在my website 上看起来不太好，我将谷歌地图放在侧边栏上。

【解决方案4】：

尝试在您的内部或外部 CSS 文件中实现这一点。

.affix + .container-fluid {
         padding-top: 0px;
         margin-top: 50px;
     }

将 margin-top 替换为导航栏的高度。希望这可以帮助。另外，请记住，这是针对容器流体的。如果您希望此 CSS 用于容器类 div 元素，请将 container-fluid 替换为 container。

【讨论】：