动态计算边栏的高度

Question

我正在尝试为高度增长（滚动时）的固定div计算算法，直到它等于视口或 div的高度，其中固定位置相对于另一个div < strong>和视口的底部

当用户滚动那么远时，我正在使用Twitter Bootstrap附加功能将我的辅助导航栏（黄色）和侧边栏（黑色）锁定到屏幕顶部。 这工作得很好。侧边栏是，竟然放弃了我麻烦件。当它处于起始位置时（如图所示），我希望条形顶部坐30px 从辅助导航栏（黄色）向下，从页面底部向上30px。

当用户滚动时，栏应该增加高度，使其在辅助导航栏下方保持30px，在屏幕底部上方保持30px（如下图所示）

栏是固定的位置后，我能够做什么，我需要做的。

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

我无法弄清楚是如何相对侧边栏的顶部位置给我 次级导航栏和我的侧栏的相对于底部的BOTTOM 的屏幕。我试着计算了侧边栏的开头的高度和的结束 滚动，但这会导致问题。

我也试着计算边栏的最终高度，让底部 侧边栏只跑出画面的边缘（当它在它的初始位置），但 如果没有足够的内容在右侧，以保证滚动，我也没办法 乘车路线在滚动条下方的项目。加上我的屏幕开始反弹 在一个真正的无吸引力的方式。

下面是当前使用的代码：

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

我一直在尝试做类似的事情（减去固定元素和导航栏）。我发现的是为了做任何类型的相对高度缩放元素上方的每个元素我希望一直扩展到开头的html标签必须设置相对高度，即使它只是height:100%; 。 （这是我原来的问题Variable height, scrollable div, contents floating）

我的目标是将身高固定为窗口大小，就像本机全屏应用程序将在我的内容子区域滚动一样，所以这对于您想要完成的内容有点偏离主题。但我尝试使用JS / JQ开始，因为你正在尝试做的事情，发现我根本无法获得窗口高度，因为高度管理的默认行为是扩展页面高度，直到页面上的所有内容都适合。我尝试的所有getHeight方法都得到了页面高度，而不是承诺的窗口/视口高度。因此，您可能希望尝试将身体的高度固定到窗口，然后使用overflow:scroll;滚动页面。

关于overflow:scroll;的快速说明如果你有用户使用WP8 IE（可能还有其他版本的IE），那么实现FTscroller来处理你所有的滚动元素可能是有利的，因为overflow属性默认为hidden并且是固定的浏览器属性。 FTscroller的唯一问题是因为它使用CSS偏移来移动内容容器，它可能会对设计为从页面顶部达到x高度时切换到修复的元素造成严重破坏，因为从技术上讲，它是页面顶部（或者更确切地说是页面顶部）他们所在的容器不再是页面的顶部而已超出它的范围。如果您确实需要满足此浏览器需要注意的事项。

对我的句子结构的复杂性表示道歉。 ：/

Answer 2

所以我能够想到这一点，对于任何仍在寻找的人。我最终做的是绑定到窗口滚动事件和 - 每当滚动发生 - 我检查是否已将类“affix”添加到侧边栏。如果有，那么我执行一组计算来确定侧边栏高度。否则，我执行另一组计算。代码如下：

/* 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);