Закрепление элементов с помощью события прокрутки с устранением дребезга для повышения производительности ⇐ Jquery

[Anonymous]

Как правильно плавно закрепить элемент в соответствии с положением прокрутки?
Я попытался отключить прослушиватель прокрутки для повышения производительности, но закрепление не является точным. Даже если для устранения дребезга установлено значение 10 мс, это не происходит плавно, и элемент не может четко привязаться к исходному положению.

Код: Выделить всё

var scrolling = false;
var stickPosY = 100;
var heights = [];

$(".element").each( function(index) {
heights[index] = $(".element[data-trigger=" + index + "]").offset().top;
});

function pin() {
if ( !$("#aside").hasClass("fixed") ) {

var stickyLeft = $("#aside").offset().left;
var stickyWidth = $("#aside").outerWidth();
var stickyTop = $("#aside").offset().top - stickPosY;

$("#aside").addClass("fixed");
$("#aside").css({"left": stickyLeft, "top": stickyTop, "width": stickyWidth});
}
}

function unpin() {
$("#aside").css({"left": "", "top": "", "width": ""});
$("#aside").removeClass("fixed")
}

$( window ).scroll( function() {
scrolling = true;
});

setInterval( function() {
if ( scrolling ) {
scrolling = false;

var y = window.scrollY;
console.log(y);

// PIN SIDEBAR
y > stickPosY ? pin() : unpin();

//TRIGGERS
for (var i=0; i < heights.length; i++) {
if (y >= heights[i]) {
$('.element[data-trigger="' + i + '"]').addClass("blue");
}
else {
$('.element[data-trigger="' + i + '"]').removeClass("blue");
}
}
}
}, 250 );

Вот моя ручка

Я пытался использовать ScrollMagic для проекта на сцене с булавкой и дополнительными триггерами, но прокрутка была не очень плавной. Вот и пытаюсь пересобрать его с урезанной версией и дебаушенными слушателями. Возможен ли такой подход, или мне лучше попытаться оптимизировать сцену ScrollMagic?

Подробнее здесь: https://stackoverflow.com/questions/576 ... erformance