Question

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

仅当我将附加属性应用于我的侧边栏div时才会发生这种情况。

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

但是，当我向下滚动时，它的样子如下： enter image description here

供您参考，这就是我实施词缀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小提琴，你可以看到错误：

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

我该如何解决这个问题？

Answer 1

以下是让您入门的内容：http://jsfiddle.net/panchroma/H2KU7/

它仍然需要refinememt，但重要的是完成了。关键是当你使用词缀时，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 -->

EDIT
要在左侧列的附加行为时优化您的CSS，请使用类似

的左侧列作为目标。

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

希望这有帮助！

Answer 2

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

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

正在发生的第二件事是你的固定元素的固定位置不合适。拿出

#myAffix{
    left: 0px;
}

并添加

.affix{
    top: 0px !important;
}

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

要一起查看，请查看updated fiddle example

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

    });

Bootstrap词缀不保持列布局

3 个答案: