javascript - 可根据动态内容进行调整的 Jquery 粘性页脚

Question

我目前在这里使用插件http://codedumper.com/jquerystickyfooter来创建贴纸页脚。

看看http://client.astam.co.uk。它可以按您的预期工作。

唯一的问题是，例如，如果出现错误消息并且用户单击以删除，或者切换的内容可用，页脚将从浏览器底部跳起来，直到调整窗口大小，然后它会自行排序.

有没有办法让插件知道重新定位自己？

score 1 · Accepted Answer

你支持IE6吗？如果没有，那么您可以简单地将页脚定位为“位置：固定”，而不是使用 jQuery 插件。除此之外，JQ 插件仅在窗口加载、调整大小和滚动时定位 div。为警报关闭按钮添加的以下代码将起作用 -

    $('#alert .close').click(
       function() {
         $.stickyFooterPos();
        }
   );

只需将其添加到您的 js 文件中，单击关闭按钮时定位将起作用。

编辑 - 如果您使用 fadeOut() 作为关闭按钮，前面的代码可能不起作用。相反，您可以将关闭按钮的代码更改为 -

$(this).attr('href', 'javascript:void(0)');
$(this).parent().fadeOut(200, function(){$.stickyFooterPos()});
$.stickyFooterPos();

score 1 · Accepted Answer

最好使用 $.stickyFooterPos() 作为其他布局更改函数的回调，例如将 app.js 中的关闭函数更改为

    function close(){
    $(this).attr('href', 'javascript:void(0)');
    $(this).parent().fadeOut(200,function(){$.stickyFooterPos()});
}

PS：正如其他人所建议的那样，考虑到 IE6 用户数量正在下降这一事实， position:fixed 是一个更好的选择......（参见 http://www.w3schools.com/browsers/browsers_explorer.asp和http: //www.w3schools.com/browsers/browsers_stats.asp )

2 回答 2