jquery - 将css位置更改为固定而不重置滚动位置

Question

如何在不重置当前滚动位置的情况下将元素 css 位置更改为固定？

使用脚本改变位置：

$('.bigwidth').click(function() { 
     $(this).css('position','fixed');    
})

这个例子：http://jsfiddle.net/7gRZJ
如果你滚动元素，然后点击元素，它会将它更改为固定并重置滚动位置..

所需的行为是在保留当前滚动的同时将其更改为固定位置。

Answer 1

在 click 函数中添加“return false”将阻止跳回页面顶部/重置滚动位置的默认行为。

更新代码：

$('.bigwidth').click(function() { 
     $(this).css('position','fixed');
     return false;    
})

Answer 2

$('.bigwidth').click(function() { 
     $(this).css({
          position :'fixed',
          left : -(document.body.scrollLeft)
    });
});

Answer 3

由于元素的位置变为fixed，这意味着它有效地从页面布局中取出。这意味着当它的位置属性改变时，body 将停止扩展到它的宽度，所以它会跳回到左边。解决此问题的一种方法是在更改其位置属性后重新定位元素以模拟先前的滚动位置。所以你的脚本可能看起来像：

$('.bigwidth').click(function() {
     var scrolled = $(document).scrollLeft();
     $(this).css('position','fixed');
     $(this).css("left", -scrolled);
});

这是这个工作的一个例子。

Answer 4

如果滚动是自动重置的，您可以在点击事件后重置它。获取滚动的实际位置 -> 将位置更改为固定并使用先前位置重置滚动。使用 .scrollTop() 方法来实现它--- jquery