Question

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

标记：

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

的Javascript

(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);

我怎样才能减少跳跃？

Answer 1

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

来自评论。感谢

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

1 个答案: