即使窗口很小，也要在桌面底部显示按钮

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

本文关键字：桌面 底部 显示 按钮 窗口      更新时间：2023-09-26

我有一个表分类器html页面，示例在这里。

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

即使窗口高度很小（例如，只能显示一行或两行），我如何使底部按钮可见？理想情况下，scroller_height可以是类似于$（window）.height（）/2的类型，并且它可以在调整窗口大小时自动更新。预期的情况是，即使窗口很小，底部按钮也会出现在屏幕上，而不会进行滚动操作。

如果您想让滚动窗口动态调整其高度，在Widgets>scroller下的主wiki页面上有两个演示。

  • http://jsfiddle.net/Mottie/txLp4xuk/2/
  • http://jsfiddle.net/Mottie/abkNM/8037/

本质上，你所需要做的就是调整外部滚动窗口高度

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

这是你分享的更新的演示，最小高度设置为100px。

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

  1. 创建一个函数，检查表相对于视口的可见性

以下代码：

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');
        }
    }
  1. 如果它超出了视口，请向按钮容器中添加一个CSS类，将其固定在屏幕底部。否则，请删除此类并在表的底部正常显示按钮容器

您希望在加载和窗口调整时运行此功能检查，如下所示：

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

我更新了你的小提琴：http://jsfiddle.net/12nt19vg/12/show/

试着调整窗口的大小，让我知道这是否是你想要的行为。

EDIT:在注释中加入了您的附加规范，我在按钮容器中添加了一个外部div，并修改了CSS，以直观地创建我认为您正在寻找的效果。

请看一下这把小提琴：http://jsfiddle.net/12nt19vg/27/show/

相关文章：