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

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

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

使用脚本来改变位置：

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

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

希望的行为是在保持当前滚动位置的同时将其更改为固定值。

来源

2013-07-15 bushdiver

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

来源

2013-07-15 18:53:31 hungerstar

出色地工作，谢谢:) – bushdiver

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

来源

2013-07-15 18:44:56 Mollo

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

更新代码：

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

来源

2013-07-15 18:46:49 JasonStockman

我试过了，但它仍然重置滚动 - http://jsfiddle.net/7gRZJ/3/ – bushdiver

这是一个比任何其他选项更简单的解决方案。它工作完美。 –

由于元素的定位变成fixed，这意味着它有效地被取出的页面的布局。这意味着身体在其位置属性发生改变时停止扩展到其宽度，因此它跳回到左侧。解决此问题的一种方法是重新定位元素以在更改其位置属性后模拟上一个滚动位置。所以你的脚本可能看起来像这样：

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

这里的an example of this working。

来源

2013-07-15 18:57:48 Serlite

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

回答

相关问题