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

Question

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

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

Answer 1

这是因为当你下次执行 $('.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>