Question

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

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。

否则，我们不希望元素超出其父元素，因此我们将类设置为“bottom”。这有点像position: absolute; bottom: 0;

更新示例代码在此处：http://fiddle.jshell.net/uyBRA/2/浮动div位于第二个块中。

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

1 个答案: