Question

我希望隐藏.isi-jumo-link，当.indication在视口中完全可见时。目前它只消失一次.indication位于视口的顶部。

用户需要从顶部滚动并且一次.indication完全在视图中。然后.isi-jump-link将消失。

$(window).on('scroll', function () {
    if ($(this).scrollTop() >= $('.indication').offset().top) {
        $('.isi-jump-link').hide();        
    }
    else {
        $('.isi-jump-link').show();
    }
});

请注意......在我的情况下使用固定的scrollTop是行不通的。

Answer 1

您可以检查指示的顶部和底部是否在视口内：

$(window).on('scroll', function () {
    var bottomIsVisible = $(this).scrollTop() + $(this).height() >= $('.indication').offset().top + $('.indication').height();
    var topIsVisible = var topIsVisible = $(this).scrollTop() <= $('.indication').offset().top;
    if (bottomIsVisible && topIsVisible) {
        $('.isi-jump-link').hide();        
    }
    else {
        $('.isi-jump-link').show();
    }
});

Answer 2

您还需要将.indication <div>的高度添加到等式中：

$(window).on('scroll', function () {
  if ($(this).scrollTop() >= ($('.indication').offset().top + $('.indication).height())) {
    $('.isi-jump-link').hide();        
  }
  else {
    $('.isi-jump-link').show();
  }
});

JavaScript - 当另一个元素完全位于视口内时隐藏元素

2 个答案: