Verwendung JQuery-Element von der Unterseite des Fensters befestigen

Question

ich viele Beispiele für Befestigung eines Elements oben relativ zu dem Fenster gefunden. Wie repariere ich ein Element X Pixel vom unteren Rand des Fensters? Durch einfaches Ändern ‚oben‘ auf ‚unten‘ funktioniert nicht (zum Beispiel, wenn die Höhe des Elements ist mehr als die Fensterhöhe)

Von oben:

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

es gelöst! Lösung kam ich mit:

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

Verwenden Sie die CSS bottom Eigenschaft anstelle der top Eigenschaft.

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

Answer 2

Nach Ihre Kommentare und Nachfrage:

zum Beispiel, wenn die Höhe des Elements mehr als die Fensterhöhe ist

Sie will 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(); 
    }); 
}); 

Wenn Sie versuchen, das height des Elements 700px zum Beispiel zu ändern, werden Sie sehen, dass er relative Position bekommt.