Bootstrap的固定功能无法保持列布局

Question

当我在我的浏览器（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>

这里有一个 JSFiddle 的链接，可以让您实时查看问题：

这是一个JS Fiddle，您可以查看错误：

http://jsfiddle.net/fH46S/2/

我该怎么修复它？

- ILikeTacos

---

你在JSFiddle上使用了压缩后的JS和CSS，其中似乎包含了实际的Bootstrap库文件以及你自己的脚本/标记。你能否将它们分开，并仅在fiddle中包含你自己的脚本/标记？你可以使用页面左侧的“外部资源”部分加载Bootstrap文件。 - Lloyd Banks

@LloydBanks 没想到我可以在 JSFiddle 中做到那个。现在已经修复了，感谢您的指出！ - ILikeTacos

Answer 1

这里有一些启动的内容：http://jsfiddle.net/panchroma/H2KU7/。它仍需要改进，但重要部分已完成。关键在于当您使用affix时，Bootstrap JS会在滚动一定量后将类.affix应用于您正在监视的div。此affix类具有css。

position:fixed;

这就是阻止 div 滚动的方法。它还将 div 从正常流中移除，这就是你得到重叠的原因。

我的解决方案是在左侧边栏周围包装一个新的 div，并将 affix 行为应用于此 div。你的原始代码将 <div class="col-lg-3"> 从正常流中移除，这就是问题的根源。

HTML

 <div class="col-lg-3">
    <div class="wrap" data-spy="affix" data-offset-top="200" data-offset-bottom="200" id="myAffix">
       <!-- your nav div here -->
    </div> <!-- close wrap -->
  </div> <!-- close col-lg-3 -->    

编辑
为了使左侧列在固定时的行为更加精细，可以通过以下方式针对左侧列进行调整：

target the left hand column。

.col-lg-3 .wrap.affix{
 /* custom afix padding and styling here */
}

希望这可以帮到你！

- David Taiaroa

Answer 2

你有几个问题需要解决。第一个问题是你试图将Bootstrap的脚手架与其附加功能一起使用。你会注意到，在较小的屏幕上，附加功能仍然处于活动状态，当你向下滚动屏幕时，它会覆盖在结果部分之上。

你可以通过在#myAffix元素外添加一个容器DIV，然后使用position: relative !important;与设置在1200px的媒体查询结合使用，以禁用小屏幕设备的附加功能来解决此问题。

第二个问题是固定位置的附加元素位置不正确。去掉...

#myAffix{
    left: 0px;
} 

并添加

.affix{
    top: 0px !important;
}

现在，您将在左侧有一个固定的导航栏，它可以与页面的其余部分无缝协作。想要查看完整效果，请查看更新的示例 fiddle example。

- Lloyd Banks

---

太棒了，这真正解决了我的问题，并且完美地运行。感谢您指出@media查询，我从未想到过。 - ILikeTacos

Answer 3

设置两个几乎相同的导航栏。其中一个具有class =“navbar navbar-fixed-top”，id =“nav_first”和style =“visibility：hidden;”。 第二个具有class =“navbar”和id =“nav_second”。除了这些差异，这些导航栏完全相同。

此外，将此js代码添加到页面：

$(document).ready(function(){
        console.log("document is ready");
       
        $(document).scroll(function(){
            console.log("hoook");
            var dist = elementOffset = $('#nav_second').offset().top  - $(window).scrollTop();
            console.log("dist: "+dist);
            if(dist<=0){
                $("#nav_first").css("visibility","visible");
            }
            else{
                
                $("#nav_first").css("visibility","hidden");
            }
        });
        
    });

- mustafa kemal tuna