Question

我有一张桌子

<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根据no而垂直增长。人当选择网格上的人时，第二个td上的div将填充一些字段。它工作正常。

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

当用户向下滚动页面时，有没有办法在右侧显示div以向下滚动？我检查了这个论坛上的其他链接，但没有成功。我不确定这是否是由于我的桌子和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

Answer 2

更好的方法是使用CSS样式的div。

您可以将右侧div设置为始终在滚动时显示，例如粘性div或
您可以将网格视图包装在具有固定高度的div中，以便左侧表格在视口中的该div中滚动。

改变DIV在滚动上的位置

2 个答案: