在具有动态顶值的绝对定位div上滚动jank / jitters

时间:2016-10-15 20:49:56

标签: javascript jquery html css onscroll

我最近一直在尝试/学习jQuery和Javascript,在一个项目中我遇到了一个问题。一切都工作得很好,除了滚动时脏兮兮的猛犸。是否有更好的方法来实现具有滚动背景的固定内容区域的相同效果?我已经研究过jank解决方案,我有点理解为什么会发生这种情况,我只是无法解决它的问题以及应用于我的代码的内容。任何建议/解决方案都会很棒!

JS

$(window).on('scroll', function() {
    $('.block').each(function() {
        var scrollTop = $(window).scrollTop(),
            elementOffset = $(this).offset().top,
            distance = (scrollTop - elementOffset);
        $(this).children('.cntr').css("top", distance);
    });
});

代码笔 - http://codepen.io/anon/pen/mAGyVj

当然它在Codepen中运行良好......

直接在其自己的标签中尝试iframe链接,您可以看到我正在谈论的jank - http://s.codepen.io/boomerang/bb57ff22b00020c4b4d07f0cf08718361476564202890/index.html

0 个答案:

没有答案