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

代わりtopプロパティのCSS bottomプロパティを使用します。ご意見やご要望によると

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

あなたは、例えば700pxに要素のheightを変更しようとすると、彼は相対的な位置を取得し表示されます。