Question

我有一个包含照片名称列表的div。单击某个名称时，将显示另一个div（在第一个div之外），其中包含照片和注释。当滚动第二个div时（使用主窗口滚动条），我不希望第一个div滚动，它应该保持原样。因此，只要我打开照片div，我就会将第一个div的位置从绝对更改为 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的{{1}}值。 top很重要，因为它确保$(window).scrollTop()在修复时始终处于视点。

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

1 个答案: