Retard sur double défilement avec marge supérieure

Question

J'ai un problème avec une fonction jquery que j'ai créée pour un site Web qui a 2 colonnes de hauteur différentes et qui doit défiler ensemble à des vitesses différentes.

vous pouvez trouver ici le violon: http://jsfiddle.net/w4g3rvhh/

var maxscroll = $(document).height() - $(window).height(); 
var projHeight = $("#projects").outerHeight(true); 
var agencHeight = $("#agency").outerHeight(true); 
var diffheight = projHeight - agencHeight; 
$(window).scroll(function() { 
    var margin = window.pageYOffset * diffheight/maxscroll; 
    $("#agency").css("margin-top", margin + "px"); 
}); 

Il fonctionne un peu grand pour moi, mais plusieurs utilisateurs ont un comportement « lag ». Le côté gauche saute un peu bizarrement.

Je trouve que le mauvais comportement apparaît sur safari mac (parfois chrome)

EDIT: Je l'ai fait une vidéo du comportement rencontré si nécessaire: https://youtu.be/afKziooQLac

Answer 1

Sur les appareils plus anciens, cela peut être causé en raison de la fréquence à laquelle l'événement de défilement est déclenché lors du défilement. Il se déclenche plusieurs fois de manière séquentielle, et le calcul est donc effectué plusieurs fois par seconde. Les anciens appareils ne peuvent pas suivre ce qui cause un retard. Normalement, throttling est la solution proposée, mais pour imiter un effet «collant» ou un défilement parallèle qui ne fonctionne pas bien sûr bien sûr - cependant, voir discussion in the comments. Essayez en mettant autant du calcul en dehors du gestionnaire de défilement, par exemple:

var win = $(window), 
    maxscroll = $(document).height() - win.height(), 
    agency = $("#agency"), 
    h = ($("#projects").outerHeight(true) - agency.outerHeight(true))/maxscroll; 

win.scroll(function() { 
    agency.css("margin-top", win.scrollTop() * h + "px"); 
}); 

Answer 2

S'il vous plaît utiliser le +, et non la -

var maxscroll = $(document).height() - $(window).height(); 
var projHeight = $("#projects").outerHeight(true); 
var agencHeight = $("#agency").outerHeight(true); 
var diffheight = projHeight + agencHeight; 
$(window).scroll(function() { 
    var margin = window.pageYOffset * diffheight/maxscroll; 
    $("#agency").css("margin-top", margin + "px"); 
});