JQuery：在 WebSphere Portal 7 主题中从页面底部浮动工具栏答案

【问题标题】：JQuery: Floating a toolbar from bottom of page in a WebSphere Portal 7 themeJQuery：在 WebSphere Portal 7 主题中从页面底部浮动工具栏
【发布时间】：2012-02-09 23:52:40
【问题描述】：

我正在为 WebSphere Portal 7 开发基于 PageBuilder2 (csa2.theme) 的自定义主题。我正在使用 JQuery 1.7.1。其中一个要求是有一个页脚（id 是 div#footer）和一个帮助栏（类是 div.footer.flotante），它位于页脚顶部，而页脚位于视口中，但它需要浮动在窗口底部，而页脚不在视口中...有点像 Facebook 新的时间线工具栏（添加到朋友等）或 Mashable 社交小部件，只有底部的那个。

以下是我使用 JQuery 完成的操作的 sn-p：

$(window).scroll(function (event) {
    var barra = $('div.footer.flotante');
    var offset = barra.offset();
    var bh = barra.height();
    var h =  offset.top;
    var wh = $(window).height();

    var dh = $(document).height();
    var y = $(this).scrollTop();
    var x = dh - y - wh;
    var hf = $("div#footer").height();

    if (x > hf) {
        barra.addClass('fixed');
    } else {
        barra.removeClass('fixed');
    }
});

这些是我正在使用的 CSS 样式：

div.footer.flotante{
    background:url(../images/footerone.png) repeat-x;
    width:100%;
}
div.footer.flotante.fixed{
    position: fixed;
    bottom: 0px;
    z-index: 1;
}

使用该代码，我必须浮动我的工具栏，以防 html 页面包含静态内容（因此 dh 的值是恒定的）。我的问题是，这是一个主题开发，预计会将内容动态加载到文档正文，将dh 值增加到未知数量的像素。在这种情况下，x 的值的计算采用 dh 的初始值，因此会给出一个定位错误的浮动工具栏。

如何在渲染该内容后重新计算dh 的值？
鉴于没有名为offset().bottom 的此类属性，有没有办法暂时“颠倒”文档以计算我的工具栏的offset().top 值，从而无需知道@ 的最终值987654333@?
您有其他建议来做我正在尝试的事情吗？

提前致谢。

【问题讨论】：

我找到了问题的原因：它是带有负bottom 属性的徽标的绝对定位图像，因此在页脚下方创建了一个额外的垂直间距并增加了dh 值。
将其添加为答案，然后选择正确。这样对您的帐户更有利。

标签： jquery css positioning offset viewport

【解决方案1】：

我找到了问题的原因：它是具有负底部属性的徽标的绝对定位图像，因此在页脚下方创建了一个额外的垂直间距并增加了dh 值。

【讨论】：