javascript - 滚动后将图像固定/粘贴到顶部 - 图像立即跳到顶部？

Question

我的网页中央有一张图片。一旦用户滚动并且图像到达窗口顶部，我就会尝试将图像固定到页面顶部，以便它随页面滚动。

然而，当它到达窗口顶部时它并没有粘住，而是当前用户滚动时图像立即跳到页面顶部。虽然我希望用户在页面上时图片保持固定在顶部，但当页面刷新时它会保持固定!

似乎无法解决这个问题 - 请帮忙!

index.html

<img src="./assets/img/logo.png" class="logo" alt="Logo">

样式.css

.logo {
   width: 500px;
   display: block;
   position: absolute;
   top: 200px;
   left: 0;
   right: 0;
   margin: auto;
} 

ma​​in.js

$(function() {
  var boxInitialTop = $('.logo').offset().top;
  $(window).scroll(function () {
    if ($(window).scrollTop() > boxInitialTop) {
      $('.logo').css({position: 'fixed', top: '0px'});
    } else {
      $('.logo').css({position: 'absolute'});
    }
  });
});

Answer 1

我认为您需要做的就是在向下滚动时重置初始顶部值:

  var boxInitialTop = $('.logo').offset().top;
  $(window).scroll(function() {
    if ($(window).scrollTop() > boxInitialTop) {
      $('.logo').css({
        position: 'fixed',
        top: '0px'
      });
    } else {
      $('.logo').css({
        position: 'absolute',
        top: '200px'         // add this to "reset" the top to it's original (that you set in your css)
      });
    }
  });

body {height:2000px;}

#test {
  height: 400px;
  position: relative;
}

.logo {
  width: 500px;
  display: block;
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  margin: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
  <img src="http://lorempixel.com/400/200/city/" class="logo" alt="Logo">
</div>