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);
});

这是an example of this working。

Answer 4

如果自动重置滚动，您可以在点击事件后重置它。获取滚动的实际位置 - ＆gt;将位置更改为固定并重置前一个位置的滚动。使用.scrollTop（）方法实现它--- jquery

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

4 个答案: