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时。

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

＆＃13;

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

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

Answer 2

因为{em>切换而导致offset的{{1}}受到影响。您可以尝试将偏移量缓存在.pinned-isi - 处理程序之外。

scroll

另外，我可以看到你只是比较了元素偏移量而不是包含滚动位置......但是，很难给出正确答案，没有你的标记。

jQuery：如果滚动事件内的条件不能正常工作

2 个答案: