jquery - 改变 DIV 在滚动条上的位置

Question

我有一张 table

<table>
<tr> <td> ---- asp.net gridview </td>
<td> <div class=persondetails> </div> </td></tr>
</table>

我的 javascript 从另一篇论坛文章中获取

<script language="javascript" type="text/javascript">
        var personDetail = document.querySelector('.persondetails');
        alert (personDetail);
        var origOffsetY = personDetail.offsetTop;
        debugger;
        function onScroll(e) {
            debugger;
            window.scrollY >= origOffsetY ? personDetail.classList.add('sticky') :
                                            personDetail.classList.remove('sticky');
        }

        document.addEventListener('scroll', onScroll);
    </script>

我的 asp.net gridview 根据编号垂直增长。人。选择网格上的一个人时，第二个 td 上的 div 会填充一些字段。它工作正常。

当列表变得太大时，我必须在底部选择一个人，右侧的人员详细信息会显示在顶部。这使用户可以向上滚动以查看页面底部网格中所选人员的详细信息。

有没有办法在用户向下滚动页面时让右侧的div td 显示向下滚动？我检查了这个论坛上的其他链接，但没有成功。我不确定这是不是因为我的表格和 td 布局。

我在指定的警报处得到 null。

Answer 1

你应该像这样使用一个position fixed:

var $details = $(".details"),
    detailsPos = $details.position().top;
$(window).on("scroll", function() {
    if ($(window).scrollTop() > detailsPos)
        $details.css("position", "fixed").css("top",0);
    else
        $details.css("position", "static");
});

Working example.

请注意，代码应该像这样包装在 document ready 中:

$(function() {
    // ... code ...
});

同时检查 position fixed compatibility here