用css交换jquery技术像侧边栏一样的苹果商店

Question

我希望使用jquery创建一个div，在滚动时保持不变，就像在苹果商店一样：

http://store.apple.com

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

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

Swap CSS class on the basis of Scroll Position with Javascript

然而，该解决方案有两个问题：

1)它不适用于更新的jquery版本(在我的例子中为1.5.1)

2)我也希望效果只在某个div或td内起作用，所以当您在向下滚动时到达父div或td的末尾时，它就会停止。换句话说，我不希望这个固定的div覆盖我的页脚内容，在用户滚动到页面末尾的情况下.

我是开放的任何解决方案，建议，教程和指点从专业人士喜欢你！

提前感谢！

Answer 1

我无法与不使用较新版本的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”。这会有类似于position: absolute; top: 0的东西。

如果失败，它将检查固定位置的元素的底部(屏幕顶部+高度)在其父元素的底部(父元素+父元素的顶部)下面。如果没有，我们将类设置为“浮动”，它有position: fixed; top: 0。

否则，我们不希望元素扩展到它的父元素，因此我们将类设置为“底部”。这会有类似于position: absolute; bottom: 0;的东西

更新示例代码如下:浮动div位于第二个块中的http://fiddle.jshell.net/uyBRA/2/。