Question

当搜索结果很少时，页面高度很窄，并且在滚动时粘贴侧边栏会跳跃。我试图使主容器的最小高度大于侧边栏，但它看起来不太好。当窗户高度狭窄时，如何禁用粘贴底或工作以防止跳跃？

模板显示我当前的应用程序：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;
}

Answer 1

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

JS

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>

Answer 2

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

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

希望它有所帮助。

Answer 3

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

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

对于你的模板，我尝试删除脚本并在发生词缀之前向原始侧边栏添加宽度，它对我来说很好用：

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

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

虽然你可能想要在一个单独的窗口中加载页面，或者让jsfiddle中的预览窗格非常大，以便在没有响应容器折叠所有内容的情况下查看实际情况。

Answer 4

尝试在内部或外部CSS文件中实现此功能。

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

将margin-top替换为导航栏的高度。希望这可以帮助。另外，请记住这是容器流体。如果你希望这个CSS能够用于容器分类的div元素，那就用容器替换容器流体。

当窗户高度狭窄时，如何防止在自举词缀中跳跃？

4 个答案: