动态计算侧边栏高度答案

【问题标题】：Calculating Height of Sidebar Dynamically动态计算侧边栏高度
【发布时间】：2013-12-13 01:27:37
【问题描述】：

我正在尝试制定一个固定 div 的算法，该 div 的高度会增加（在滚动时），直到它等于视口的高度或相对于另一个 div 具有固定位置的 div 和视口底部

当用户滚动到那么远时，我正在使用 Twitter Bootstrap 词缀将我的辅助导航栏（黄色）和侧边栏（黑色）锁定到屏幕顶部。这很好用。侧边栏是给我带来麻烦的部分。当它处于其起始位置时（如下图所示），我希望栏的顶部位于 30 像素从二级导航栏（黄色）向下，从页面底部向上 30 像素。

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

在酒吧固定位置后，我可以做我需要做的事情。

.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();
};

此代码在页面加载时调用，并在窗口调整大小时再次调用。任何帮助将不胜感激！

【问题讨论】：

标签： javascript jquery twitter-bootstrap affix

【解决方案1】：

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

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

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

并为我的句子结构的复杂性道歉。：/

【讨论】：

没问题，感谢您的回答。不完全是我要找的东西..你试过 $(window).height() 的可视高度吗？
是的！ :/ 没用。我认为现在 body/html 高度设置为视口高度的 100% 会起作用。 :)

【解决方案2】：

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

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

【讨论】：