加载动态内容时粘性页脚会向下移动

发布于 2024-09-04 05:57:09 字数 936 浏览 10 评论 0原文

我一直在使用 jQuery 的这个片段来获得粘性页脚:

if($(document.body).height() < $(window).height()){
        $("#footer").css({
            position: "absolute",
            top:  ( $(window).scrollTop() + $(window).height()
                  - $("#footer").height() ) + "px",
            width: "100%"
       });
}
$(window).scroll(positionFooter).resize(positionFooter);

但是,当我将可展开/可折叠的 div 放置在原始内容低于窗口的位置时,这种情况就会中断,因为它会粘在窗口的底部,而不是文档的底部。

有没有办法解决这个问题,或者有更好的方法?

请记住,我对 HTML 没有太多控制权,因为我需要在 Django 的管理界面中执行此操作,该界面不允许在您可能想要完成此类事情的地方注入太多 HTML(即这个答案这个答案不起作用为我)。

I've been using this snippet of jQuery to get a sticky footer:

if($(document.body).height() < $(window).height()){
        $("#footer").css({
            position: "absolute",
            top:  ( $(window).scrollTop() + $(window).height()
                  - $("#footer").height() ) + "px",
            width: "100%"
       });
}
$(window).scroll(positionFooter).resize(positionFooter);

However, that breaks when I've got expandable/collapsible divs lying around where the original content was less high than the window, since it is then stuck to the bottom of the window, rather than the bottom of the document.

Is there a way of fixing this, or a better way of doing it?

Please bear in mind that I don't have much control over the HTML, since I need to do this in Django's admin interface, which doesn't allow much injection of HTML in the places you might want to to accomplish this sort of thing (i.e. this answer and this answer don't work for me).

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

淡淡绿茶香 2024-09-11 05:57:09

因此,当文档高度高于窗口高度时,您不想再绝对定位页脚吗?然后添加一个 else 语句来执行此操作:

if($(document.body).height() < $(window).height()){
    $('#footer').css({
        position: 'absolute',
        top:  ( $(window).scrollTop() + $(window).height()
              - $("#footer").height() ) + "px",
        width: "100%"
    });
} else {
    $('#footer').css({
        position: 'static'
    });
}   

这是一个现场演示。请注意,我将 click 事件添加到 $(window) 中,因为当您展开/折叠 div 时,resize 不会在 FF 中触发。

So you don't want to position the footer absolutely anymore when the document height is higher than the window height? Then add an else statement which does exactly that:

if($(document.body).height() < $(window).height()){
    $('#footer').css({
        position: 'absolute',
        top:  ( $(window).scrollTop() + $(window).height()
              - $("#footer").height() ) + "px",
        width: "100%"
    });
} else {
    $('#footer').css({
        position: 'static'
    });
}   

Here's a live demo. Note that I added click event to $(window) because the resize doesn't get triggered in FF when you expand/collapse a div.

Oo萌小芽oO 2024-09-11 05:57:09

我使用这种方法来处理粘性页脚和动态内容(但我的应用程序的集成比示例稍微复杂一些)并且它有效: http://www.cssstickyfooter.com/

I used this approach to sticky footers and dynamic content (but my application was slightly more complicated to integrate than the examples) and it works: http://www.cssstickyfooter.com/

川水往事 2024-09-11 05:57:09

我知道我来晚了,但最近我的 AJAX 评论和帖子/作品集标签过滤器都遇到了类似的问题。谷歌引导我来到这里,接受的答案启发了我下面的第一个例子。

我将粘性页脚逻辑设置为在文档就绪和窗口调整大小时触发:

$(document).ready(function() {
  stickyFooter();
});
$(window).on('resize', function() {
  stickyFooter();
});

对于我的动态内容,我可以简单地在 DOM 高度修改函数中触发调整大小,例如:

function dynamicFunctionOne() {
  /* DOM-height-modifying logic here */

  $(window).trigger('resize');
}

dynamicFunctionOne();

在另一种情况下,我将粘性页脚函数称为另一个 DOM 高度修改函数。

function dynamicFunctionTwo(callback) {
  /* DOM-height-modifying logic here */

  callback();
}

dynamicFunctionTwo(stickyFooter);

无论采用哪种实现方式,都无需在每次单击时监听事件来设置粘性页脚的位置。

I know I'm way late to the party, but I encountered a similar problem with both my AJAX comments and post/portfolio tag filters just recently. Google led me here, and the accepted answer inspired my first example below.

I set my sticky footer logic to fire for both document ready and window resize:

$(document).ready(function() {
  stickyFooter();
});
$(window).on('resize', function() {
  stickyFooter();
});

For my dynamic content, I can simply trigger a resize within the DOM-height-modifying function e.g.:

function dynamicFunctionOne() {
  /* DOM-height-modifying logic here */

  $(window).trigger('resize');
}

dynamicFunctionOne();

In another case I call my sticky footer function as a callback of another DOM-height-modifying function.

function dynamicFunctionTwo(callback) {
  /* DOM-height-modifying logic here */

  callback();
}

dynamicFunctionTwo(stickyFooter);

With either implementation, there's no need to listen for an event on every click that occurs to set the sticky footer's position.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文