如何在滚动和使用jquery偏移量时减少闪烁

How to reduce flicker when scrolling & using jquery offset

本文关键字：偏移量 闪烁 jquery 滚动      更新时间：2023-09-26

我有我想要的行为：当用户向下浏览页面时保留在视口中的目标对象（但始终保留在父容器内）。 问题是当用鼠标滚动时它会闪烁很多。 看一看：

http://jsfiddle.net/3ZQat/5/

标记： 

<div id='container'>
    <div id='target'></div>
</div>

爪哇语

(function($){
    $(document).ready(function(){
        // variables
        var target = $('#target');
        var targetRect = target[0].getBoundingClientRect();
        var container = $('#container');
        var contRect = container[0].getBoundingClientRect();
        var viewportHeight = $(window).height();
        // logic conditions
        var topOffScreen = false;
        var roomForTarget = false;
        // scroll event
        $(window).scroll(function(){
            targetRect = target[0].getBoundingClientRect();
            contRect = container[0].getBoundingClientRect();
            winTop = $(window).scrollTop();
            topOffScreen = (contRect.top < 0);
            roomForTarget = (contRect.bottom > target.height());
            // if container scrolls off top of viewport
            if(topOffScreen && roomForTarget){
                target.offset({top:winTop});
                target.css('border', 'solid 3px green');
            // if container fits in viewport entirely
            } else if (roomForTarget) {
                target.css('border', 'solid 3px green');
                // more code here
            // if container no longer fits in viewport
            } else {
                target.css('border', 'solid 3px red');
                // more code here
            }
        });
    });//end document.ready
})(jQuery);

我怎样才能让它不那么跳跃？

"你可以在这里查看。jsfiddle.net/nqZu2/2 可能不是你想要的一切。但应该给你一些想法。

从评论中。谢谢

相关文章：