卷轴上的邋Animation动画

Question

我试图通过使用jQuery更改CSS属性，根据我向下滚动页面的距离来设置块的动画效果。

使用鼠标滚轮时，会有轻微的闪烁位置以及最终同时显示的位置。

可以通过以下链接查看此示例。

http://fiddle.jshell.net/LPvES/10/show/light/

此行为不顺畅，感觉不稳定。

我不知道为什么会这样。预期的行为应该是：

http://jsfiddle.net/LPvES/10/embedded/result/

我理解链接完全相同的例子的讽刺意味。我可以看到两者之间的区别在于，一个嵌入在iFrame中，这不是我想要使用的解决方案。

我的JS代码：

var icons = {
    header: "iconClosed",
    activeHeader: "iconOpen"
};

$('.main--content').accordion({
    header: ".accordion header",
    heightStyle: "content",
    collapsible: true,
    icons: icons
});

function accordionIcon() {

    var icon = $('.ui-accordion-header-icon.iconOpen');
    var iconClosed = $('.ui-accordion-header-icon.iconClosed');

    if (icon[0]) {
        var article = $('.ui-accordion-header-icon.iconOpen').closest('.article')

        if (article.offset().top - window.scrollY > 200) {

            if (icon.css('top') !== 0) {
                icon.css('top', 0)
            }

        } else if (article.offset().top - window.scrollY < 200) {
            // article.outerHeight() - (icon.offset().top - article.offset().top) > 0
            if (article.offset().top - (window.scrollY + 200) < article.outerHeight() && window.scrollY + $(window).height() - article.offset().top < article.outerHeight()) {

                var position = (window.scrollY + 200) - article.offset().top

                // if(icon.css('transform') === none){
                icon.css('top', position)
                // }

                if (icon.hasClass('iconExtend')) {
                    icon.removeClass('iconExtend')
                }

            } else if (window.scrollY + $(window).height() - article.offset().top > article.outerHeight()) {

                if (icon.css('top') !== article.outerHeight() + 30) {
                    icon.css('top', article.outerHeight() + 30)
                }

                if (!icon.hasClass('iconExtend')) {
                    icon.addClass('iconExtend')
                }

            } else {

                if (icon.css('top') !== article.outerHeight()) {
                    icon.css('top', article.outerHeight())
                }

                if (!icon.hasClass('iconExtend')) {
                    icon.addClass('iconExtend')
                }

            }
        }
    }

    if (iconClosed[0]) {

        if (iconClosed.css('top') !== 0) {
            iconClosed.css('top', 0)
        }

        if (iconClosed.hasClass('iconExtend')) {
            iconClosed.removeClass('iconExtend')
        }

    }
}

function raf() {

    window.requestAnimFrame = (function () {
        return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) {
            window.setTimeout(callback, 1000 / 60);
        };
    })();

    requestAnimFrame(raf);

    accordionIcon();
}

raf();

任何帮助都将不胜感激。