1

現在のスクロール位置をリセットせずに要素のCSS位置を固定に変更するにはどうすればよいですか?

スクリプトを使用して位置を変更する:

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

この例: http://jsfiddle.net/7gRZJ
要素をスクロールしてから要素をクリックすると、要素が固定に変更され、スクロール位置がリセットされます。

望ましい動作は、現在のスクロールを保持したまま固定に変更することです。位置。

4

4 に答える 4

2 
$('.bigwidth').click(function() { 
     $(this).css({
          position :'fixed',
          left : -(document.body.scrollLeft)
    });
});
于 2013-07-15T18:53:31.780 に答える
2

要素の配置が に変わるためfixed、これはページのレイアウトから効果的に取り出されることを意味します。これは、位置属性が変更された瞬間に本体がその幅に拡張されなくなるため、左にジャンプして戻ることを意味します。これを解決する 1 つの方法は、position 属性を変更した後、要素の位置を変更して以前のスクロール位置をシミュレートすることです。したがって、スクリプトは次のようになります。

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

この作業の例を次に示します。

于 2013-07-15T18:57:48.793 に答える