javascript - jQuery:如果滚动事件中的条件无法正常工作

我在窗口底部（固定位置）有一个固定的小部件，该控件应根据小部件相对于页面上小部件下方内容的位置显示/隐藏。如果用户滚动通过.page-isi内容，则.pinned-isi应该隐藏，否则显示。当我执行控制台日志时，条件已正确触发，但是在将show / hide函数附加到$('.pinned-isi')后，它会反复滚动来回滚动，而不是像预期的那样触发hide函数。

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

最佳答案

这是因为下次执行$('.pinned-isi').hide();时，$('.pinned-isi').offset().top将为0。

隐藏元素之前，最好先保存它。

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

* {
  margin: 0;
  padding: 0;
}
.full-wrapper {
  height: 300px;
  border: 1px solid #ddd;
  overflow: auto;
}
.page-isi {
  height: 3000px;
  background: -moz-linear-gradient(90deg, #00cb4c 0%, #ffffff 100%);
  background: -webkit-gradient(linear, 90deg, color-stop(0%, #00cb4c), color-stop(100%, #ffffff));
  background: -webkit-linear-gradient(90deg, #00cb4c 0%, #ffffff 100%);
  background: -o-linear-gradient(90deg, #00cb4c 0%, #ffffff 100%);
  background: -ms-linear-gradient(90deg, #00cb4c 0%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00cb4c', endColorstr='#ffffff', GradientType='0');
  background: linear-gradient(0deg, #00cb4c 0%, #ffffff 100%);
  position: relative;
}
.pinned-isi {
  height: 20px;
  width: 200px;
  background-color: red;
  position: fixed;
  left: 0;
  top: 100px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="full-wrapper">
  <div class="page-isi">
    <div class="pinned-isi">
      PINNED
    </div>
  </div>
</div>