javascript - 通过 JavaScript 将元素固定到另一个元素的底部

Question

我一直在处理问题，我的计算似乎在某些地方出现了偏差，但对于我来说，我无法弄清楚在哪里。

基本上，我想要做的是将一个元素固定到另一个元素的内部。因此，在滚动时，固定元素将驻留在用户视口(viewport)的底部，直到它到达其父容器的末尾。

我知道有 jQuery Pin插件在那里...但我想自己构建它，以便我可以集成到另一个插件中 — 还有学习目的。

下面是我的基本计算，有一个 fiddle 可以让我看到它更符合我想要完成的事情。

var $win = $(window);

$win.on('scroll', function(e) {
    var $base = $('.base'),
        $inner = $('.inner'),

        baseoffset = $base.offset().top,
        viewportHeight = $win.height(),
        innerBoundingBox = $base[0].getBoundingClientRect().top,

        innerPOS = innerBoundingBox + viewportHeight; 

    if(innerPOS < 0) {
        $inner.css('bottom', 0); 
    } 
    else {
        $inner.css('bottom', innerPOS);
    }
});

jsFiddle: http://jsfiddle.net/listao/Acb6R/

更新:jsFiddle 链接已更新为最新版本。

Answer 1

好吧，您计算了盒子的顶部，但没有计算底部。这是一个解决方案:

var $win = $(window),
    $base = $('.base'),
    $inner = $('.inner');

$win.on('scroll', function(e) {
    var viewportHeight = $win.height(),
        baseBoundingBox = $base[0].getBoundingClientRect().top,
        innerPOS = (baseBoundingBox + $base.outerHeight()) - viewportHeight,
        baseWidth = $base.outerWidth();

    if(innerPOS <= 0) {
        if ($inner.css('position') !== 'absolute') {
            $inner.css({ position: 'absolute', maxWidth: 'none', left: 0, marginLeft: 0 });
        }
    } 
    else {
        if ($inner.css('position') !== 'fixed') {
            $inner.css({ position: 'fixed', maxWidth: baseWidth, left: '50%', marginLeft: -(baseWidth / 2) });
        }
    }
});

我正在更改位置、宽度和居中信息。有点麻烦，但由于 .inner 是 .base 的子项(即 position: relative)，我想不出一个更好的方法。

这是 fiddle 更新:http://jsfiddle.net/rodgolpe/Acb6R/7/