Question

我很困惑，为什么这段代码不起作用。当我向下滚动窗口时，为什么图像位置不固定。

我知道这是一个非常常见的问题，我们将不胜感激。

$(window).scroll(function () {
    if($(window).scrollTop() === 200){
    	$("#dataImg").css({'position':'fixed','top':'0px'});
    }
});

.container {
  height: 1500px;
  background: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img src="http://www.placehold.it/200x300" id="dataImg">
</div>

Answer 1

我认为问题在于“$（窗口）.scrollTop === 200”。你想使用＆gt;或者＆lt;取决于你的情况：

$(window).scroll(function () {
  if($(window).scrollTop() > 200){
    $("#dataImg").css({'position':'fixed','top':'0px'});
  }
});

Answer 2

我想你想在向下滚动200px时修复该图像。您可以将您的Javascript代码更改为以下内容：

$(window).scroll(function () {
    if($(window).scrollTop() >= 200){
      $("#dataImg").css({'position':'fixed','top':'0px'});
    } else {
      $("#dataImg").css({'position': '', 'top' : ''});
    }
});

我的JS代码在哪里以及我做错了什么

2 个答案: