Я пытаюсь разработать алгоритм для фиксированного 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();
};
этот код вызывается при загрузке страницы и снова на окно изменения размера. Любая помощь будет принята с благодарностью!
никаких проблем, спасибо, что ответим. Не совсем то, что я ищу, хотя ... вы пробовали $ (window) .height() для видимой высоты? – Bobby
Да! :/не работает. Предполагаю, что теперь будет работать, когда высота body/html установлена на 100% высоты видового экрана. :) – azariah