1

当 URL 包含哈希时，tablesorter 上的 stickyHeaders 小部件覆盖表格的第一行时遇到问题。

例如 living.php?tab=1#sacramento1

该页面显示正确的选项卡并跳转到正确的行，但标题显示在该行上方。

为了解决这个问题，如果 url 中有哈希，我一直在禁用 stickyHeader 小部件

这就是我正在做的事情：

<script type="text/javascript">$(document).ready(function() 
{ 
  //CHECK for hash. don't want sticky headers with hash
  if (window.location.hash) {
    var workingID = window.location.hash;
    tid=workingID.substr(1,workingID.length);
    document.getElementById(tid).setAttribute("class", "showRow");
    // extend the default setting to always include the zebra widget. 
    $.tablesorter.defaults.widgets = ['zebra'];
  } else {
    // extend the default setting to always include the zebra widget and the sticky headers. 
    $.tablesorter.defaults.widgets = ['zebra','stickyHeaders'];
  }
  // extend the default setting to always sort on the first column 
    $.tablesorter.defaults.sortList = [[0,0]]; 
    // call the tablesorter plugin 
    $("table").tablesorter();   
}

);

有没有办法让stickyHeaders 识别哈希行并将其显示在标题下方？

4

1 回答 1

0

尝试添加此代码（演示）：

$('a').click(function(){
    if (this.hash !== "") {
        window.location.hash = this.hash;
        // find table that link is inside
        var $table = $(this).closest('table'),
            // get stickheader height + a little extra,
            // if the link is in a table & table has a stickyheader...
            shHeight = ( $table.find('.tablesorter-stickyHeader').parent().height() || 0 ) * 1.2;
        // move the anchor below the sticky header
        $(window).scrollTop( $(window).scrollTop() - shHeight);
        // prevent anchor from controlling the scrollTop
        return false;
    }
});

​</p>

于 2012-08-27T03:01:41.210 回答