在 table 底部显示按钮，即使 window 非常小

Question

我有一个 table 排序器 html 页面，示例是 here。

$('table').tablesorter({
    theme: 'blue',
    widgets: ['zebra', 'scroller'],
    widgetOptions: {
        scroller_height: 400
    }
});

即使 windows 高度很小（比如说，只能显示一两行），我怎样才能使底部按钮可见？理想情况下 scroller_height 可以是某种类型，例如 $(window).height()/2 并且它可以在 window 调整大小时自动更新。预期的是，即使 window 很小，底部按钮也会出现在屏幕上而没有滚动动作。

Answer 1

我想说有几种方法可以实现您想要的，一种简单的方法是：

创建一个函数来检查 table 与视口的可见性；

代码如下：

function checkVisible() {
   var bottom_of_table = $("#mytable").offset().top + $("#mytable").outerHeight();
   var bottom_of_screen = $(window).scrollTop() + $(window).height();
        if(bottom_of_screen > bottom_of_table){
            $("#buttons-container").removeClass('bottom-fixed');        
        }
        else {
            $("#buttons-container").addClass('bottom-fixed');
        }
    }

如果它超出了视口，请将 CSS class 添加到您的按钮容器中，将其固定在屏幕底部。否则，删除此 class 并正常显示按钮容器，位于 table.

您希望运行此函数在加载时检查并 window 调整大小，如下所示：

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

我已经更新了你的fiddle：http://jsfiddle.net/12nt19vg/12/show/

尝试调整 window 的大小，让我知道这是否是您正在寻找的行为。

编辑： 结合您在评论中的附加规范，我在您的按钮容器中添加了一个外部 div 并修改了您的 CSS创建我认为您正在寻找的效果。

请看这个fiddle：http://jsfiddle.net/12nt19vg/27/show/

Answer 2

如果你想让滚动条window动态调整高度，main wiki page Widgets > Scroller 下有两个demo。

基本上，您需要做的就是调整外滚动window高度

$('.tablesorter-scroller-table').css({
  height: '',
  'max-height': height + 'px'
});

Here is the demo you shared 已更新，最小高度设置为 100 像素。

在 table 底部显示按钮，即使 window 非常小

Show the button at the table bottom even when the window is very small

javascript

css

jquery

tablesorter