使用css交换jquery技术的苹果商店式边栏

我希望使用jquery创建一个div，它在滚动时保持不变，就像在apple store中一样：

将任何产品添加到购物车，您将看到它出现在右侧的一个div中，如果您进一步向下滚动页面，该div将保持不变

我在这里找到了这个解决方案：

但是，该解决方案存在两个问题：

1在我的例子中，它不适用于较新的jquery版本1.5.1

2我还希望效果只在某个div或td内起作用，因此当向下滚动时到达父div或td的末尾时，它将停止在那里。换句话说，我不希望这个固定的div覆盖我的页脚内容，如果用户一直向下滚动到页面的末尾

我愿意接受像你这样的专业人士提供的任何解决方案、建议、教程和建议

---

提前谢谢

我不能对不使用较新版本jQuery的代码说话。看起来什么都没变

对于定位，使孩子停留在单元格中，您可以使用这种方法：

function fixInParent(selector) {
    var $el = $(selector);

    $(window).scroll(function() {
        if($el.parent().offset().top > $(this).scrollTop())
            $el.addClass('top').removeClass('floating').removeClass('bottom');
        else if ($(this).scrollTop() + $el.height() < $el.parent().offset().top + $el.parent().height())
            $el.addClass('floating').removeClass('top').removeClass('bottom');
        else
            $el.addClass('bottom').removeClass('top').removeClass('floating');
    });
}

虽然未进行优化，但会执行两项检查。首先，如果页面尚未滚动到父元素的顶部，它会将类设置为“top”。这有点像位置：绝对；排名：0

如果失败，它将检查具有固定位置的元素是否将其屏幕底部顶部+高度低于其父元素底部-父元素顶部+父元素高度。如果没有，我们将类设置为“floating”，其位置为：fixed；排名：0

否则，我们不希望元素超出其父元素，因此我们将类设置为“bottom”。这有点像位置：绝对；底部：0

---

更新示例代码在这里：浮动div在第二个块中。

@Tules他指定您需要向购物车添加一个项目以查看效果。最新的jQuery版本是1.6.4我所说的最新版本是更高版本，我知道有人会指出1.5.1不是最新版本，让我来编辑我的帖子，我想你能提供更多关于什么不适合你的细节吗？你有错误吗？示例代码会有所帮助。看起来很好，我有一个问题，如果我的父母是一个身高未知的TD，我如何使其相对？我将您的代码应用于此示例页面，但浮动div在到达父母TD底部时立即消失，我想这是因为我无法分配位置：相对于父母，在我的特殊情况下。有工作吗？为什么你不能申请职位：亲戚？我在你的页面上的Chrome开发工具中做的，效果很好。