jquery - 如何使滚动只在一个元素中工作？

Question

我正在尝试创建一个顶部有图片的网页。当用户向上滚动时，图像应该向上一点而其他元素被阻止。一旦该图像到达所需位置，其余元素也可以向上或向下滚动。这是主要思想:用户滚动，图像移动。用户不断滚动，元素也在移动。 这是我到目前为止所拥有的:

var lastScrollTop = 0;

$(window).scroll(function(event){
  var st = $(this).scrollTop();

    if (st > lastScrollTop){
   $("#ballonImg").css("top", "-=5px");
    } else {
      $("#ballonImg").css("top", "+=5px");
    }
   lastScrollTop = st;
 });

和 Html:

 <div id="top">
   <div id="images">
    <img id="ballonImg"src="http://i.imgur.com/rMm5gCy.jpg"/>
    <img src="http://i.imgur.com/l3GI35D.png"/>
   </div>
  </div>

  <div id="cenas"></div>

Answer 1

您应该使用 CSS 定位。固定位置、绝对位置、相对位置和静态位置都可用于此目的。您还应该考虑将静止图像设置为 div 的背景，并将其他图像放在其中，但将 z-index 设置为 2(或任何大于 1 的值)。