Javascript 如何减少滚动时的闪烁&；使用jqueryoffset

我已经实现了我想要的行为：当用户向下翻阅页面时，目标对象将保持在视口中（但始终保持在父容器中）。问题是当用鼠标滚动时，它会闪烁很多。看看：

标记：

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

（函数（$）{
$（文档）.ready（函数（）{
//变数
var target=$（“#target”）；
var targetRect=target[0]。getBoundingClientRect（）；
var container=$（“#container”）；
var contRect=container[0]。getBoundingClientRect（）；
var viewportHeight=$（窗口）.height（）；
//逻辑条件
var topOffScreen=false；
var roomForTarget=假；
//滚动事件
$（窗口）。滚动（函数（）{
targetRect=target[0]。getBoundingClientRect（）；
contRect=容器[0]。getBoundingClientRect（）；
winTop=$（窗口）.scrollTop（）；
topOffScreen=（contRect.top<0）；
roomForTarget=（contect.bottom>target.height（））；
//如果容器从视口顶部滚动
if（topOffScreen和roomForTarget）{
offset（{top:winTop}）；
css（'border'，'solid 3px green'）；
//如果容器完全适合视口
}else if（roomForTarget）{
css（'border'，'solid 3px green'）；
//这里有更多代码
//如果容器不再适合视口
}否则{
css（'border'，'solid 3px red'）；
//这里有更多代码
}
});
})；//结束文档。准备好了吗
})（jQuery）；

我怎样才能让它不那么紧张？

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

---

从评论中可以看出。谢谢

您是否尝试过一步不将top设置为wintop。。但要循序渐进。@VirtualBaseClass还没有。也许我可以/应该动画化（w/jQuery？css转换？），但对我来说这是一个稍微新的领域。你有什么建议吗？@doublejack。。你可以在这里查一下。。可能不是你想要的一切。。“但这会给你一些想法。”doublejack。。必须添加绝对位置才能使动画工作。我想你可以找到你想要的盒子和固定点的新坐标that@VirtualBaseClass.. 谢谢，这就是我需要的方向。加速动画并使用线性缓和使其看起来相当不错。这是我的最终版本：