Question

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

例如living.php？tab = 1＃sacramento1

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

为了解决这个问题，如果网址中有哈希，我一直在禁用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识别哈希行并将其显示在标题下面？

Answer 1

尝试添加此代码（demo）：

$('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;
    }
});

stickyHeader覆盖目标哈希链接行

1 个答案: