Question

我创建了小提琴：https://jsfiddle.net/empafmw8/

我的一切工作正常，但当您滚动回网站顶部时，.sticky-header会在您向上滚动时将其position更改为relative但我需要当.first出现在屏幕上时，这样做。

如果.first有height: 100%

，我也需要它才能运作

我尝试了类似else if ($(window).scrollTop() == 800px)或else if ($(window).scrollTop() == 100%)的内容，但它无效。

Answer 1

您可以尝试else if ($(window).scrollTop() < $('.second').offset().top) - 只要.first出现在屏幕上，这就会使粘性标题回到原来的位置。

Example fiddle

Answer 2

试试这个（请参阅我的更改的评论）：

＆＃13;

$(document).ready(function() {
  var firstHeight = $('.first').outerHeight(); // get the height of the /first div
  //header
  $(window).scroll(function() {
    if ($(window).scrollTop() > $('.sticky-header').offset().top && !$('.sticky-header').hasClass('posi')) {
      $('.sticky-header').addClass('posi');
    } else if ($(window).scrollTop() <= firstHeight && $('.sticky-header').hasClass('posi')) { // remove the class if the height is less than or equal to the height of the first div
      $('.sticky-header').removeClass('posi');
    }
  });

});

＆＃13;

.first {
  width: 100%;
  height: 800px;
  background: red;
}
.second {
  width: 100%;
  height: 2000px;
  background: blue;
}
.sticky-header {
  width: 100%;
  height: 80px;
  background-color: green;
}
.posi {
  margin-top: 0;
  top: 0;
  position: fixed;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="first"></div>
<div class="second">
  <div class="sticky-header"></div>
</div>

＆＃13;

或者您可以使用原始偏移顶部执行if else - 只需将hasClass移到其中：updated fiddle that's a bit more efficient

回来时OnScroll Sticky标题

2 个答案: