Question

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

基本的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

请帮忙

Answer 1

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

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

＆＃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;

scrolltop（）触发得太早

1 个答案: