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">）< / p>

我尝试过：

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

有人可以帮忙吗？

Answer 1

我也在这里创建了一个小提琴（记下你对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（）行，因为它也是多余的（对我而言，可能对你有用）。

请告诉我这是否是您要找的，如果您有任何疑问：）

Answer 2

试试这个jsfiddle。它使用来自jQuery scroll() detect when user stops scrolling的窗口滚动停止检测。并根据$(window).scrollTop()

向上/向下滚动元素

将<div>修复到顶部，直到它到达容器的末尾</div>

2 个答案: