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

【问题标题】：Fix/stick image to top after scrolling - the image jumps to the top straight away?滚动后将图像固定/粘贴到顶部 - 图像立即跳到顶部？
【发布时间】：2016-05-11 14:19:58
【问题描述】：

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

但是，当它到达窗口顶部时，图像不会一直停留，而是在用户滚动时立即跳到页面顶部。虽然我希望图像在用户在页面上时保持固定在顶部，但在页面刷新时它保持固定！

似乎无法解决这个问题 - 请帮助！

index.html

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

style.css

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

main.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'});
    }
  });
});

【问题讨论】：

标签： javascript jquery html css scroll

【解决方案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>

【讨论】：

嗨皮特 - 感谢您的回复！只要用户滚动，图像仍然会立即从中心跳到顶部 - 我试图让它仅在用户滚动并且图像到达窗口顶部时才固定到顶部。另外，我希望图像保持固定在顶部，仅在刷新页面时返回其原始位置。有什么想法吗？
@domburford，您使用的是什么浏览器，因为它似乎按照您说的对我来说应该做的（我使用的是最新版本的 chrome） - 如果您使用 sn-p 的完整页面链接并开始向下滚动，图像不会停留在顶部，直到您到达它的顶部？
抱歉！如果我从我的代码 jsfiddle.net/uot0un4y 中删除此淡入淡出和过渡效果，它会起作用 - 不知道为什么这会影响滚动和修复解决方案..
@domburford 好吧，如果您的窗口和徽标以 display:none;那么您的偏移顶部将为 0，这就是徽标会立即跳到顶部的原因。一旦你的 fadeIn 完成，你将需要计算偏移量 - 在你的 fadeIn 的回调函数中设置一个全局变量 - 像这样：jsfiddle.net/uot0un4y/1
谢谢！不幸的是，我无法让它工作，所以可能只是手动设置 boxInitialTop 例如if ($(window).scrollTop() > 205。页面刷新仍然导致问题：/ - 图像仍然固定在顶部..

【解决方案2】：

您的代码有效。

您只需重置else 部分中的top 值。这样它就保持0px，因为它是在if 部分中设置的。

【讨论】：

您好 - 感谢您的回复！该代码有效，但只要用户滚动，图像就会立即从中心跳到顶部。我试图让它仅在用户滚动并且图像到达窗口顶部时才固定到顶部。

【解决方案3】：

您需要将元素的原始位置放回到它开始的位置（在 else 之后）。一旦元素返回到position:absolute，您需要确保它的top 属性返回到200px，否则它仍将保留在fixed 时设置的值，即0。

见下文：

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

【讨论】：

您好 - 感谢您的反馈！问题是一旦用户开始滚动，图像就会跳到顶部 - 立即从中心直接移动到顶部。
这很奇怪。也许尝试在 jsfiddle 中复制它并将其发布在这里，以便我们可以从那里开始工作。

【解决方案4】：

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

【讨论】：