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

我也在此处创建了一个 fiddle (注意到您对 Vector 的回答的评论):http://jsfiddle.net/asifrc/XLKmH/

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

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

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

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

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

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

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