Pencerenin altından elemanı sabitlemek için JQuery'yi kullanın

Question

Bir öğenin pencereye göre üstünü sabitlemek için birçok örnek buldum. Pencerenin altından bir X piksel öğesini nasıl düzeltebilirim? Basitçe 'alt' çalışmıyor için 'top' değişen üst itibaren

(örneğin, öğenin yüksekliği pencere yüksekliğinden daha fazladır ise):

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

bunu çözüldü!

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

Kullanım CSS bottom mülkiyet yerine top mülkiyet: Çözüm I ile geldi.

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

Answer 2

görüş ve talebe göre: örneğin

, öğenin yüksekliği pencere yüksekliği

Sen something like this istediğinden fazlasını olur? 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(); 
    }); 
}); 

Eğer örneğin 700px için elemanın height değiştirmeye çalışırsanız

, onun göreceli konumunu alır göreceksiniz.