当我在浏览器(chrome)中向下滚动时,右栏被推到左边,我的侧边栏被推到背景,右边的所有内容都在左侧边栏上.
这只有当我将affix属性应用到我的边栏div时才会发生.
如果您注意到,在正常情况下,页面呈现无问题,如下所示：
但是,当我向下滚动时,这就是它的样子：
为了您的参考,这是我如何实现affix div：
<div class="row content-wrapper">
<div data-spy="affix" data-offset-top="200" data-offset-bottom="200" id="myAffix">
<div class="col-lg-3">
<!-- Sidebar code -->
</div>
</div>
<div class="col-lg-9">
<!-- content -->
</div>
</div>
这是一个链接到JS小提琴,所以你可以看到现场发生的问题：
这是一个JS小提琴,让您看到错误：
如何解决这个问题？
解决方法
你在这里有几件事情.第一个问题是您正在尝试使用Bootstrap的脚手架及其贴纸功能.您会注意到,在较小的屏幕上,固定功能仍然有效,当您向下滚动屏幕时,它会覆盖在结果部分的顶部.
您可以通过在#myAffix元素之外添加容器DIV,然后使用position：relative！important;结合设置在1200像素的媒体查询,以禁用具有小屏幕宽度的设备的贴图功能.
发生的第二件事是固定元素的固定位置不合适.取出
#myAffix{
left: 0px;
}
并添加
.affix{
top: 0px !important;
}
现在,您将在左侧安装一个固定的导航栏,与页面的其余部分无缝工作.
要一起看看,看看updated fiddle example
