jquery - Apple store like sidebar with css swapping jquery 技术

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 一起工作。看起来什么都没有改变。

为了让 child 留在一个单元格中，您可以使用这种方法进行定位:

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;顶部:0。

如果失败，它会检查具有固定位置的元素的底部(屏幕顶部 + 高度)是否低于其父元素的底部(父元素的顶部 + 父元素的高度)。如果不是，我们将类设置为“ float ”，它有 position: fixed;顶部:0。

否则，我们不希望该元素超出其父级，因此我们将类设置为“底部”。这会像 position: absolute;底部:0；

更新 示例代码在这里:http://fiddle.jshell.net/uyBRA/2/ float div 在第二个 block 中。