滚动引导贴div

我试图在引导中创建一个固定的导航栏，它也允许我滚动它的内容时，它是在页面之外。滚动引导贴div

硒这里：http://www.bootply.com/T9x2m0FgmV

我差点它只是我不能让滚动条可用于显示导航栏“treemenu”正确的，当我滚动页面的工作。

理想情况下，我希望边栏贴到顶部，并且看起来完全像您在滚动滚动条之前一样。现在它被冲高到其内容的宽度。基本上我希望它保留了col-lg-4

我试图复制下面的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：只是增加像上面一％的宽度不工作的所有不同尺寸的浏览器..

来源

2016-08-11 JensB

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

然后你强制元素的宽度。

来源

2016-08-11 14:11:42

罗恩·范德黑伊登让我的路到了一个解决方案上：

您可以只添加$（ '＃treemenu'）宽度（$（ '＃treemenu'）宽度（））。 ;

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

为了处理大小调整，我在所有其他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我可以调整的飞行导航栏的大小山坳-SM-4中的“隐藏” shadowpage了。

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

来源

2016-08-11 15:13:10 JensB

滚动引导贴div

回答

相关问题