javascript - 使固定到顶部直到它到达它的容器的末端

Question

我有以下代码：

<div class="span4" style="height:1000px;">
 <div id="iphone-frame">
  <div id="iphone">
   <div id="iframe-iphone">
    <h1><div id="titlePreview"></div></h1>
    <h2><div id="subtitlePreview"></div></h2>
    <p><div id="contentPreview"></div></p>
   </div>
  </div>
  <div id="iphone-shadow"></div>
</div>

我正在尝试做的是编写一些Javascript，以便<div id="iphone-frame">在滚动过去时修复到窗口的顶部，直到它到达容器的末尾（<div id="span4">）

我试过的：

• 修改这个：http: //jsfiddle.net/trepmal/e7GN8/
• jquery.scrollfollow.js 插件

任何人都可以帮忙吗？

Answer 1

我在这里也创建了一个小提琴（记下您对 Vector 答案的评论）：http: //jsfiddle.net/asifrc/XLKmH/

我将类添加sticker到您要粘贴的 div 中，并相应div地将 css 中的选择器更改为sticker。您代码开头的克隆业务是多余的，所以我摆脱了它。

然后我添加了以下计算sticker底部的行：

var bottom = $('.sticker').parent().offset().top + $('.sticker').parent().height();

然后将 if 语句从更改if (dist >= fromtop)为

if (dist >= fromtop && dist <=  bottom)

然后我删除了 .hide() 行，因为它也是多余的（对我来说，可能对你有用）。

让我知道这是否是您正在寻找的，如果您有任何问题:)

Answer 2

试试这个jsfiddle。它使用来自jQuery scroll()的窗口滚动停止检测来检测用户何时停止滚动。并根据$(window).scrollTop()