将CSS位置更改为固定位置而不重置滚动位置

Question

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

使用脚本更改位置：

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

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

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

Answer 1

在点击功能内添加“ 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 ，这意味着它实际上已从页面布局中移出。 这意味着在更改其位置属性的那一刻，该主体将停止扩展为其宽度，因此它会跳回左侧。 解决此问题的一种方法是在更改元素的位置属性后重新放置元素以模拟先前的滚动位置。 因此您的脚本可能类似于：

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

这是此工作的示例 。

Answer 4

如果滚动自动重置，则可以在单击事件后将其重置。 获取滚动条的实际位置->将位置更改为固定，然后将滚动条重置为先前的位置。 使用.scrollTop（）方法来实现它--- jquery