Прокрутить загрузочный бокс, прикрепленный div

Question

Я пытаюсь создать прикрепленную панель навигации в бутстрапе, которая также позволяет мне прокручивать ее содержимое, когда оно находится за пределами страницы.

Se здесь: 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; 

Update 1: Если добавить что-то вроде:

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

Он выглядит хорошо до тех пор пока я сделать страницу достаточно мал для начальной загрузки, чтобы попытаться поместить вещи друг за друга. Когда это происходит, навигационная панель и контент попадают друг на друга.

Это не выглядит очень привлекательно:

Update 2: Просто добавив ширина%, как и выше не работает для всех разные размеры браузера ..

Answer 1

Вы можете просто добавить $('#treemenu').width($('#treemenu').width());

Затем вы принудительно изменяете ширину элемента.

Answer 2

Рон ван дер Хейден позвольте мне на пути к решению с:

Вы можете просто добавить $ ('# 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 я могу изменить размер панели навигации на лету к размеру Col-см-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(); 
}); 

Я также сделал это так, Navbar крепится к нижней части экрана до тех пор пока он закреплен так, что его высота увеличивается по мере прокрутки до тех пор пока она занимает всю высоту, когда возлагал.

Рабочий пример: http://www.bootply.com/ooU5nm7rcY