jquery - 将位置更改为固定时防止 div 滚动回顶部

Question

我有一个包含照片名称列表的 div。单击名称时，会显示另一个 div(在第一个 div 之外)及其下方的照片和评论。当第二个 div 滚动时(使用主窗口滚动条)，我不希望第一个 div 滚动，它应该保持原样。因此，我一打开照片 div，就将第一个 div 的位置从 absolute 更改为 fixed。到目前为止一切顺利，效果很好。

但是，当第一个 div 在打开照片之前滚动时，将此 div 设置为 fixed 会导致它跳回顶部，而我希望它保持在原来的位置。有没有办法做到这一点？为什么会跳到顶部？

基本上我想实现与在 Facebook 中显示照片相同的效果。背景卡住在原处，而照片区域可以滚动。

谢谢!

Answer 1

固定的 div 跳到顶部，因为没有顶部/底部值基本上意味着它们位于 0。

现在，为防止这种情况，您必须设置当前位置(在 position 更改为 fixed 之前)相对于窗口 (这是关键部分)。

查看我的 jsfiddle

其中的 jquery 部分:

$('#click').click(function() {
    var ftop = $('#fixer').offset().top - $(window).scrollTop();
    var fleft = $('#fixer').offset().left;
    $('#fixer').css({position: 'fixed', left: fleft + 'px', top: ftop + 'px'});
});

在固定位置之前，计算当前顶部坐标[offset().top - (window).scrollTop]，然后传递给#fixer' s top 值。 $(window).scrollTop() 很重要，因为它确保 #fixer 在固定时始终处于视点。