scrolltop()触发得太早

时间:2017-04-22 16:45:32

标签: scrolltop sticky

我要疯了..我正试图获得粘性导航的效果,但是我有一个图像,一旦它到达窗口的顶部就应该固定在页面的顶部,然后以下元素只是滚动到该图像的顶部。那是我的代码:

基本的html是:

<section class="about">
...
</section>
<section> 
  <img src='' class="sticky">
  <div> ...</div>
</section>

使用Javascript:

$(window).load(function() {
  var sticky = $(".scroll");
  var height = $("#about").height();
  $(window).scroll(function() {
    if($(this).scrollTop() > height ){
    sticky.addClass("fix");
    } else {
   sticky.removeClass("fix");
   }
  });
})

它工作正常,除了 - 图像(“.sticky”)过早修复。我正在向下滚动,甚至在我的“约”部分移开之前,图像就会固定并跳到顶部。屏幕截图显示了它。与女孩在上面的大图像有“粘性”类 here's the screenshot

请帮忙

1 个答案:

答案 0 :(得分:0)

您应该检查页面顶部的img偏移量,而不是<section class="about">的高度。

我用的不是图像,而是用来表示粘性&#39;应该实现。您还在代码段中未公开<section>标记。

&#13;
&#13;
var offset = $('.sticky').offset().top;

$(window).on('scroll', function () {
	if ($(document).scrollTop() > offset) {
  	$('.sticky').addClass('fix');
  } else {
    $('.sticky').removeClass('fix');
  }
});
&#13;
.about {
  height: 100vh;
  width: 200px;
  background: lightgreen;
}
.example {
  background: lightblue;
  height: 120vh;
  width: 200px;
}
.sticky {
  background: salmon;
  width: 200px;
  height: 100px;
}
.fix {
  position: fixed;
  top: 0;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="about"></section>
<section class="example">
  <div class="sticky">quasi img</div>
  <div> ...</div>
</section>
&#13;
&#13;
&#13;