Question

任何人都可以推荐一个jquery插件，允许你在页面顶部粘贴几行

即。页面加载，内容在正确的位置，然后一旦内容到达页面的顶部，它在用户滚动时固定到位...然后如果他们向上滚动内容将返回到它的原始位置？< / p>

有问题的内容将是一些TR元素。

我尝试了一些，但我试过的所有问题都有重大问题，所以我想知道你是否可以为我推荐一些选择？感谢

Answer 1

好的，这就是我如何处理这个问题。

首先，我们有一个像这样的“目标”div：

<div id="fixedHeader">
    <table>
        <thead></thead>
    </table>
</div>

具有以下CSS：

#fixedHeader
{
  position: fixed;
  top: 0;
  float, left, right, margin, etc: as you want them;
}

#fixedHeader:not(.active)
{
  display: none;
}

首次加载页面时，我们会将表格的thead复制到此div中。然后，当用户滚动使表格的顶部不再可见时，显示此信息。当它们向上滚动时，再次隐藏它。隐藏和显示我将通过添加/删除active类来完成。

$(document).ready(function() {
    // copy over the thead
    $('#fixedHeader > table > thead').html($('#theTable > thead').html());

    // show or hide the div as necessary.
    $(window).scroll(function() {
        if ( $('#theTable > thead').offset.top < $(window).scrollTop() )
        {
            $('#fixedHeader').addClass('active');
        }
        else
        {
            $('#fixedHeader').removeClass('active');
        }
    });
});

如果用户可以滚动到表的末尾，则会遇到问题;如有必要，您可以扩展该案例的if条件。

Answer 2

请使用：

$("body").on("scroll",function(){
  $("tr.stickToTop").each(function(){
    if($(this).offset().y<=0){
      $(this).css({
        position: "fixed",
        top:0
      });
    } else {
      $(this).css({
        position: "static",
        top:''
      });
    }
  });
});

将$("tr.stickToTop")替换为适用于<tr />元素的jQuery选择器。

Jquery插件在滚动时在页面顶部粘贴几个表行？

2 个答案: