0

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

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

在此处输入图像描述

当用户滚动时，该栏的高度应增加，使其保持在辅助导航栏下方 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();
};

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

4

2 回答 2

0

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

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

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

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

于 2013-12-13T02:05:51.593 回答
0

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

/* 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);
于 2013-12-15T23:32:34.320 回答