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

Answer 2

根据您的意见和要求：

例如，如果元素的高度大于窗口高度

您想要something like this吗？

JS

$element = $("#element");
function setPosition(){
    var pixels = 10;
  var $elementH = $element.height();
  var $windowH = $(window).height();

  if ($windowH > $elementH) {
      $element.css({
          'position': 'fixed',
          'bottom': pixels + 'px'
      });
  } else {
      $element.css({
          'position': 'relative',
          'bottom': '0px'
      });
  }
}

$(function(){
    setPosition();
  $(window).scroll(function(){
    setPosition();
  });
});

例如，如果您尝试将元素的height更改为700px，则会看到他获得相对位置。

使用JQuery从窗口底部修复元素

2 个答案: