jquery - 引导词缀不保持列布局

Question

当我在浏览器（chrome）中向下滚动时，右栏一直被推到左边，我的侧边栏被推到后台，所有右侧的内容都在左侧边栏上。

这只发生在我将附加属性应用到我的侧边栏 div 时。

如果您注意到，在正常情况下，页面呈现没有问题，如下所示：

但是，当我向下滚动时，它是这样的：

供您参考，这就是我实现词缀 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 fiddle 的链接，以便您可以实时看到问题的发生：

这是一个 JS fiddle 供您查看错误：

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

我怎样才能解决这个问题？

Answer 1

这里有一些让你开始的东西：http: //jsfiddle.net/panchroma/H2KU7/

它仍然需要细化，但重要的部分已经完成。关键是当您使用 affix 时，Bootstrap JS 将 .affix 类应用于您在设置的滚动量后监视的 div。这个词缀类有css

position:fixed;

这就是阻止 div 滚动的原因。它还使 div 脱离了正常流程，这就是你得到重叠的原因。

我的解决方案是在左侧栏周围包裹一个新的 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 -->    

编辑
以优化您的 css 以适应左侧列在粘贴时的行为，将左侧列定位为类似

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

希望这可以帮助！

Answer 2

你有几件事在这里发生。第一个问题是您试图结合使用 Bootstrap 的脚手架及其附加功能。您会注意到，在较小的屏幕上，词缀功能仍然处于活动状态，当您向下滚动屏幕时，它会覆盖在结果部分的顶部。

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

发生的第二件事是您的附加元素的固定位置不在位置。取出

#myAffix{
    left: 0px;
} 

并添加

.affix{
    top: 0px !important;
}

现在您将在左侧有一个固定的导航栏，可以与页面的其余部分无缝协作。

要一起查看所有内容，请查看更新的小提琴示例

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");
            }
        });
        
    });