javascriptで固定位置を実装すると、スクロール時にSafariでジッタが発生する

Question

ブラウザウィンドウに固定されているため固定位置が機能しないため、テキストが画面の右端に表示され、それに行くことはできません。とにかく、私は絶対的な位置を使用して、次にjavascriptの "top"を調整しようとしました。 FirefoxとChromeではうまく動作しますが、Safariではスクロールするときにコンテンツのジッタが発生します。

http://jsfiddle.net/Z8UFE/4/

<div class="fixed sticky" data-offset-top="50"><p>fixed</p></div> 

$(document).ready(function() { 
    var documentHeight = $(document).height(); 
    $(document).scroll(function() { 
     var scrollTop = $(window).scrollTop(); 

     $(".sticky").offset(function() { 
     $this = $(this); 
     var offsetTop = $this.data("offset-top"); 

     if (scrollTop < 0) { 
      scrollTop = 0; 
     } 

     var newTop = offsetTop + scrollTop; 
     if (newTop < offsetTop) { 
      newTop = offsetTop; 
     } 

     // Prevents document from infinitely expanding. 
     var maxTop = documentHeight - $this.height(); 
     if (newTop > maxTop) { 
      newTop = maxTop 
     } 

     // Prevents a bit of jitter since the current offset can be 
     // not precisely the initial offset. 338 Vs. 338.12931923 
     var currentTop = $this.offset().top; 
     if (Math.abs(currentTop - newTop) >= 1) { 
      return { top: newTop } 
     } else { 
      return {} 
     } 
     }); 
    }); 
}) 

Answer 1

私は私はあなたが達成しようとしているかを理解だと思います。

あなたが要素上の固定位置を保つとJavaScript/jQueryを使って水平に再配置した場合、あなたがスムーズに垂直方向のスクロールを維持し、それはまた、その水平位置を維持できるようにすることができます：

$(function() { 
    var $sticky = $('.sticky'); 
    var target = 800; 

    $(document).scroll(function() { 
     var left = $(window).scrollLeft(); 
     var adj = target - left; 
     $sticky.css({left: adj}); 
    }); 
}); 

これはscrollLeft()を使用していますscrollTop（）の水平対応部分

http://jsfiddle.net/Z8UFE/18/