3

当搜索结果少于页面高度时，页面高度变窄，并且在滚动时附加侧边栏正在跳跃。我试图使主容器的最小高度大于侧边栏，但它看起来不太好。如何在窗口高度狭窄时禁用 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;
}
4

4 回答 4

3

在设置词缀之前检查 .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>
于 2014-03-22T01:08:39.470 回答
1

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

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

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

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

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

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

于 2014-03-21T06:54:49.503 回答
1

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

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

希望能帮助到你。

于 2014-03-16T13:03:24.503 回答
0

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

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

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

于 2017-07-05T00:34:28.187 回答