마진 상단의 듀얼 스크롤에서 지연

Question

2 개의 다른 높이 열이 있고 다른 속도로 함께 스크롤해야하는 웹 사이트에 대해 작성한 jquery 기능에 문제가 있습니다.

여기에서 바이올린을 찾을 수 있습니다 : 그것은 나를 위해 좀 잘 작동하지만, 여러 사용자가 "랙이"동작을 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"); 
}); 

. 왼쪽 편은 이상하게 뛰어 오른다.

나는 잘못된 행동이 맥 사파리 (때로는 크롬)

편집에 나타나는지 알아 : https://youtu.be/afKziooQLac

Answer 1

이 발생할 수 있습니다 이전 기기 : 필요한 경우 I는 발생 행동의 비디오를했습니다 왜냐하면 스크롤 할 때 스크롤 이벤트가 트리거되는 빈도 때문입니다. 순차적으로 여러 번 트리거되므로 계산은 초당 여러 번 수행됩니다. 오래 된 장치는 지연을 야기 할 수 없습니다. 일반적으로 throttling이 제안 된 솔루션이지만, 끈적 거리는 효과 또는 병렬 스크롤링을 모방하여 깔끔하게 작동하지는 않지만, discussion in the comments을 참조하십시오. 예를 들어, 스크롤 핸들러의 외부 계산의 정도를 넣어보십시오 :

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

하지의 +를 사용하십시오 - 저를 위해

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"); 
});