如何判断图像是否在触摸屏幕顶部？

Question

我想让菜单消失，并且当我滚动图像时，一旦图像到达屏幕顶部，就会发生一些其他操作。 图像是全宽度的，因此它们会碰到x轴上的每个点。 我尝试使用elementFromPoint，但这只是返回了整个HTML文档。 有什么办法可以做到吗？

Answer 1

假设您的图片是固定的（我认为是固定的），则可以执行以下操作：

  var timer; $(document).scroll(function () { // Set a timeout so that the function doesn't // execute at every scroll event. // Only when the user has actually stopped scrolling if(timer) clearTimeout(timer); timer = setTimeout(function () { if($('#hello').offset().top - $(window).scrollTop() <= 0) { $('#hello').attr('alt', 'Im touching the top!'); $('#status').text('Image is touching the top, or past it'); } else { $('#hello').attr('alt', 'Not at top'); $('#status').text('Image is not touching the top'); } }, 100); }); 

 html, body { height: 400%; } img { position: absolute; top: 150px; width: 100px; height: 100px; } #status { position: fixed; top: 0; right: 0; background: #000; color: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="status">Image is not touching the top</div> <img id="hello" alt="I'm an image">