Question

我一直在处理问题，我的计算似乎在某些地方已经开始，但对于我的生活，我无法弄清楚在哪里。

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

我知道那里有jQuery Pin插件......但我想自己构建它，这样我就可以集成到另一个插件中 - 加上学习目的。

以下是我的基本计算，并且有一个小提琴可以看到它与我想要完成的内容更加一致。

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) });
        }
    }
});

我正在更改position，宽度和居中信息。有点麻烦，但由于.inner是.base的孩子（position: relative），我无法想到更好的方式。

以下是小提琴更新：http://jsfiddle.net/rodgolpe/Acb6R/7/

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

1 个答案: