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

Use JQuery to fix element from bottom of window

本文关键字：元素 底部 窗口 JQuery 使用      更新时间：2024-05-11

我发现了很多修复元素顶部相对于窗口的例子。如何从窗口底部固定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'
    });
}

使用CSS bottom属性而不是top属性。

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

根据您的意见和需求：

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

你想要这样的东西吗？

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，你会看到他得到了相对位置。

相关文章：