javascript - 使用 JQuery 修复窗口底部的元素

Question

我发现了很多固定元素顶部相对于窗口的示例。如何从窗口底部修复元素 X 像素？简单地将“顶部”更改为“底部”是行不通的(例如，如果元素的高度大于窗口高度)

自上而下:

var pixels = 10;
var $elemPosition = $element.position();
var $elementH = $element.height();
var $windowH = $(window).height();
var $bottom = $element.offset().top + $element.height();

if ($(window).scrollTop() + pixels >= $elemPosition.top) {
    $element.css({
        'position': 'fixed',
        'top': pixels + 'px'
    });
} else {
    $element.css({
        'position': 'relative',
        'top': '0px'
    });
}

解决了!我想出的解决方案:

if (($windowH + $(window).scrollTop() - $bottom - pixels) >= 0) {
    $element.css({
        'position': 'fixed',
        'top': ($windowH - $element.height() - pixels) + 'px',
        'width': $eW + 'px',
        'height': $eH + 'px'
    });
} else {
    $element.css({
        'position': 'relative',
        'top': '0px'
    });
}

Answer 1

使用 CSS bottom 属性代替 top 属性。

$element.css({
    'position': 'fixed',
    'bottom': pixels + 'px'
});