将css位置更改为固定而不重置滚动位置答案

【问题标题】：Change css position to fixed without resetting scroll position将css位置更改为固定而不重置滚动位置
【发布时间】：2013-07-13 17:53:12
【问题描述】：

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

使用脚本改变位置：

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

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

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

【问题讨论】：

标签： jquery css scroll position

【解决方案1】：

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

更新代码：

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

【讨论】：

这是一个比任何其他选项都简单得多的解决方案。效果很好。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

这里是an example of this working。

【讨论】：

【解决方案4】：

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

【讨论】：