滚动固定div的bootstrap

Question

我正在尝试在bootstrap中创建一个附加的导航栏，这也允许我在页面外部滚动它的内容。

请点击此处：http://www.bootply.com/T9x2m0FgmV

我几乎让它工作了，只是当我滚动页面时，我无法使导航栏“treemenu”的滚动条显示正确。

理想情况下，我希望侧边栏能够贴在顶部，看起来与滚动条滚动之前的内容完全一样。现在它被刷到了内容的宽度。基本上我希望它保留col-lg-4

的所有属性

我尝试从bootstrap复制CSS以模仿col-lg-4，但这只会让事情变得更糟。

  width: 33.33333333%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;

更新1：如果我添加以下内容：

.affix{
  top: 0px;
  width: 19%;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

它看起来不错，直到我使页面足够小，以便引导程序尝试将事物一个接一个地放置。当发生这种情况时，导航栏和内容会相互叠加。

这看起来不太吸引人：

更新2 ：仅添加上述％宽度并不适用于所有不同的浏览器尺寸。

Answer 1

您只需添加$('#treemenu').width($('#treemenu').width());

即可

然后将宽度强制为元素。

Answer 2

Ron van der Heijden让我走上解决方案的道路：

  

你可以添加$（'＃treemenu'）。width（$（'＃treemenu'）。width（））;

在页面调整大小时，只是添加此功能不起作用，因为在初始加载后这不会调整导航栏的大小。此外，我无法在调整大小后重新运行此代码，因为此后页面可能会滚动，这样就不会设置正确的宽度。

为了处理调整大小，我在所有其他html下创建了一个页面基础结构的副本。

  <!-- used to get real position -->
  <div class="row" id="shadowtreemenucontainer">
     <div class="col-sm-4"><div id="shadowtreemenu" class="well" style=></div></div>
      <div class="col-sm-8"></div>
   </div>

然后使用jQuery我可以动态调整导航栏的大小，使其达到“隐藏”阴影页面中col-sm-4的大小。

function makeTreeNodeLookGood(){
  $('#shadowtreemenucontainer').show(1, function(){
    $('#treemenu').width($('#shadowtreemenu').width());
  });
  $('#shadowtreemenucontainer').hide(1);

  setHeightOfNonScrolledView();
}

function setHeightOfNonScrolledView(){
    $("#navTreeContainer").css({
      height: (($(window).height() -$("#navTreeContainer").offset().top + $(document).scrollTop() )) + 'px'
  }); 
}

$(document).ready(makeTreeNodeLookGood);
$(window).resize(makeTreeNodeLookGood);

$( window ).scroll(function() {
  setHeightOfNonScrolledView();
});

我也是这样做的，所以导航栏固定在屏幕的底部，直到它被固定，以便在你滚动时它的高度增加，直到它固定时占据整个高度。

工作示例：http://www.bootply.com/ooU5nm7rcY