L'implementazione di una posizione fissa in javascript causa jitter in Safari durante lo scorrimento

Question

La posizione fissa non funziona per il mio caso d'uso perché è fissa alla finestra del browser e puoi entrare in uno stato in cui il testo è fuori dallo schermo verso destra e tu non posso arrivarci Ad ogni modo, ho tentato di utilizzare il posizionamento assoluto e poi di aggiustare il "top" in javascript. Funziona molto bene con Firefox e Chrome, ma in Safari il contenuto si agita quando si scorre.

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

Credo di capire ciò che si sta cercando di ottenere.

Se si mantiene il posizionamento fisso sull'elemento e riposizionare orizzontalmente con javascript/jquery è possibile mantenere lo scorrimento verticale liscia e permettono di mantenere anche il suo posizionamento orizzontale:

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

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

Questo utilizza scrollLeft() che è la controparte orizzontale per scrollTop()

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