-1

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

即页面加载，内容在正确的位置，然后一旦内容到达页面顶部，当用户滚动时它会固定在适当的位置......然后如果他们向上滚动内容将回到原来的位置？

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

我尝试了一些，但我尝试的所有方法都有重大问题，所以我想知道您是否可以为我推荐更多选择？谢谢

4

2 回答 2

3

好的，这就是我的处理方法。

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

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

具有以下CSS：

#fixedHeader
{
  位置：固定；
  顶部：0；
  浮动、左、右、边距等：如您所愿；
}

#fixedHeader:not(.active)
{
  显示：无；
}

当页面第一次加载时，我们将表格复制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 条件。

于 2012-08-01T21:43:35.903 回答
0

只需使用这个：

$("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 选择器。

于 2012-08-01T21:48:14.490 回答