Расчет высоты боковой панели динамически

Question

Я пытаюсь разработать алгоритм для фиксированного div, который растет по высоте (при прокрутке), пока он не будет равен высоте окна просмотра или div с фиксированным положением относительно другого div и внизу окна просмотра

Я использую Twitter Bootstrap affix, чтобы заблокировать мою вторичную навигационную панель (желтую) и мою боковую панель (черную) в верхней части экрана, когда пользователь прокручивает это расстояние. Это прекрасно работает. Боковая панель является частью, которая дает мне неприятность. Когда он находится в своем исходном положении (как показано на диаграмме belorw), я хочу, чтобы верхняя часть панели сидела 30px вниз от вторичной навигационной панели (желтый) и 30px вверху внизу страницы.

Как прокрутке, бар должен расти в высоту, так что он остается 30px под вторичной навигационной панели и 30px над нижней части экрана (как показано на приведенной ниже схеме)

После того, как бара зафиксирована, я могу делать то, что мне нужно.

.sidebar {  
position:fixed; 
top:100px;   
bottom:30px; 
left:30px; 
} 

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

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

ниже текущий код используется:

ShelvesSideBar.prototype._resize_sidebar = function(_this) { 
    var PADDING = 50; 
    var window_height = $(window).height(), 
     nav_bar_height = $('.nav_bar').height() + $('.secondary_tabs').height(), 
     sidebar_height = window_height - nav_bar_height - PADDING, 
     sidebar_scrollable_height = sidebar_height - $('.bar_top').height(); 

    _this.$container.height(sidebar_height); 
    _this.$container.find('.bar_bottom').height(sidebar_scrollable_height); 

    /* reset the nanoscroller */ 
    _this.$container.nanoScroller(); 
}; 

этот код вызывается при загрузке страницы и снова на окно изменения размера. Любая помощь будет принята с благодарностью!

Answer 1

так что я смог понять это, для тех, кто все еще смотрит. То, что я закончил, было привязкой к событию прокрутки окна и - всякий раз, когда прокрутка произошла - я проверяю, добавлен ли класс «аффикс» на боковую панель. Если он имеет, то я выполняю один набор вычислений для определения высоты боковой панели. В противном случае я выполняю другой набор вычислений. Код ниже:

/* called on window scroll */ 
var PADDING = 70; 

var window_height = $(window).height(), 
    nav_bar_height = $('.nav_bar').height() + $('.secondary_tabs').height(), 
    header_height = $('.prof_block').height() - nav_bar_height, 
    sidebar_height = _this.$container.hasClass("affix") ? window_height - nav_bar_height - PADDING : window_height - (header_height + nav_bar_height) - PADDING, 
    sidebar_scrollable_height = sidebar_height - $('.bar_top').height(); 

_this.$container.height(sidebar_height); 
_this.$container.find('.bar_bottom').height(sidebar_scrollable_height); 

Answer 2

Я пытался сделать что-то подобное (минус фиксированные элементы и navbars). То, что я нашел, состояло в том, чтобы сделать любой вид относительной высоты, масштабируя каждый элемент выше элемента, который я хотел масштабировать, вплоть до открытия html-тегов, должен был иметь относительную высоту, даже если это было всего лишь height:100%;. (вот мой первоначальный вопрос Variable height, scrollable div, contents floating)

Моя цель состояла в том, чтобы высота тела была зафиксирована до размера окна, например, для полноэкранного приложения с моим прорисовкой в ​​подкатегориях контента, поэтому это немного не соответствует теме того, что вы хотите для достижения. Но я попытался использовать JS/JQ, чтобы начать с того, что вы пытаетесь сделать в настоящее время, и обнаружил, что я просто не мог получить высоту окна, потому что поведение по умолчанию для управления высотой заключается в том, чтобы увеличить высоту страницы, пока все на странице не подходит , И все методы getHeight, которые я пробовал, мы получаем высоту страницы, а не высоту окна/видового экрана, как и было обещано. Поэтому вы можете попытаться установить высоту своего тела в окно и перейти оттуда, используя overflow:scroll;, чтобы прокрутить страницу.

Быстрое примечание к overflow:scroll; Если у вас есть пользователи, которые используют WP8 IE (и, возможно, другие версии IE), может быть полезно реализовать FTscroller для обработки всех ваших элементов прокрутки, поскольку свойство переполнения по умолчанию скрыто и является фиксированным браузером имущество. Единственная проблема с FTscroller заключается в том, что он использует сдвиги CSS для перемещения контейнера содержимого, который может нанести ущерб элементам, которые предназначены для переключения на исправление, когда они достигают высоты x сверху страницы, потому что технически верхняя часть страницы (или, вернее, верхняя часть контейнер, в котором они находятся) больше не находится в верхней части страницы, а выходит за ее пределы. Просто нужно знать, нужно ли вам обслуживать этот браузер.

И извиниться за сложность структуры предложения. :/