Javascript jQuery:If滚动事件中的条件不能正常工作

我在窗口底部有一个固定的小部件（固定位置），它应该根据小部件相对于页面上小部件下方内容的位置来显示/隐藏。如果用户滚动到

.page isi

内容之前，则

.pinted isi

应隐藏，否则显示。当我记录控制台日志时，条件正确触发，但是在将显示/隐藏功能附加到

$（'.pinted isi'）

后，它会使用滚动反复来回切换，而不是像预期的那样仅触发隐藏功能

$('.full-wrapper').scroll(function(){
    if ($('.page-isi').offset().top - 50 >= $('.pinned-isi').offset().top){
        $('.pinned-isi').show();
    } else {
        $('.pinned-isi').hide();
    }
});

---

这是因为当您执行

$（'.pinted isi'）.hide（）时下次
$（'.pinted isi'）.offset（）。顶部将为0

最好在隐藏元素偏移之前保存它


$（文档）.ready（函数（）{
var pinnTop=$（'.pinted isi'）.offset（）.top；
$（'.full wrapper'）。滚动（函数（）{
如果（（-1*$（'.page isi'）.offset（）.top-50）>=pinnTop）{
$（'.pinted isi'）.show（）；
}否则{
$（'.pinted isi'）.hide（）；
}
});
});
*{
保证金：0；
填充：0；
}
.全套包装{
高度：300px；
边框：1px实心#ddd；
溢出：自动；
}
.第页isi{
高度：3000px；
背景：-moz线性梯度（90度，#00cb4c 0%，#ffffff 100%）；
背景：-webkit渐变（线性，90度，颜色停止（0%，#00cb4c），颜色停止（100%，#ffffff））；
背景：-webkit线性梯度（90度，#00cb4c 0%，#ffffff 100%）；
背景：-o-线性梯度（90度，#00cb4c 0%，#ffffff 100%）；
背景：-ms线性梯度（90度，#00cb4c 0%，#ffffff 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#00cb4c'，endColorstr='#ffffffff'，GradientType='0'）；
背景：线性梯度（0度，#00cb4c 0%，#ffffff 100%）；
位置：相对位置；
}
.isi{
高度：20px；
宽度：200px；
背景色：红色；
位置：固定；
左：0；
顶部：100px；
显示：无；
}

钉住
这是因为当您执行
$（'.pinted isi'）.hide（）时下次
$（'.pinted isi'）.offset（）。顶部将为0

最好在隐藏元素偏移之前保存它


$（文档）.ready（函数（）{
var pinnTop=$（'.pinted isi'）.offset（）.top；
$（'.full wrapper'）。滚动（函数（）{
如果（（-1*$（'.page isi'）.offset（）.top-50）>=pinnTop）{
$（'.pinted isi'）.show（）；
}否则{
$（'.pinted isi'）.hide（）；
}
});
});
*{
保证金：0；
填充：0；
}
.全套包装{
高度：300px；
边框：1px实心#ddd；
溢出：自动；
}
.第页isi{
高度：3000px；
背景：-moz线性梯度（90度，#00cb4c 0%，#ffffff 100%）；
背景：-webkit渐变（线性，90度，颜色停止（0%，#00cb4c），颜色停止（100%，#ffffff））；
背景：-webkit线性梯度（90度，#00cb4c 0%，#ffffff 100%）；
背景：-o-线性梯度（90度，#00cb4c 0%，#ffffff 100%）；
背景：-ms线性梯度（90度，#00cb4c 0%，#ffffff 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#00cb4c'，endColorstr='#ffffffff'，GradientType='0'）；
背景：线性梯度（0度，#00cb4c 0%，#ffffff 100%）；
位置：相对位置；
}
.isi{
高度：20px；
宽度：200px；
背景色：红色；
位置：固定；
左：0；
顶部：100px；
显示：无；
}

钉住
这是因为
.pinted isi
的
偏移量因切换而受到影响。您可以尝试在
滚动
-处理程序之外缓存偏移量

var fixedPoint = $('.pinned-isi').offset().top

$(window).resize(function(){
    fixedPoint = $('.pinned-isi').offset().top
});

$('.full-wrapper').scroll(function(){
    if ($('.page-isi').offset().top - 50 >= fixedPoint){
        $('.pinned-isi').show();
    } else {
        $('.pinned-isi').hide();
    }
});

此外，正如我所看到的，您只需比较元素偏移量，而不包括滚动位置。。。但是，如果没有标记，就很难给出正确的答案。
这是因为
的
偏移量
。固定isi
由于切换而受到影响。您可以尝试在
滚动
-处理程序之外缓存偏移量

var fixedPoint = $('.pinned-isi').offset().top

$(window).resize(function(){
    fixedPoint = $('.pinned-isi').offset().top
});

$('.full-wrapper').scroll(function(){
    if ($('.page-isi').offset().top - 50 >= fixedPoint){
        $('.pinned-isi').show();
    } else {
        $('.pinned-isi').hide();
    }
});

此外，正如我所看到的，您只需比较元素偏移量，而不包括滚动位置。。。但是，如果没有您的标记，很难给出正确的答案。
您可以共享可执行的演示/代码片段吗？您可以共享可执行的演示/代码片段吗？或者更快7秒，即使使用示例：D+17秒，即使使用示例：D+1