絕對定位，但僅在div內

Question

我在粘性javascript函數上存在問題，該函數允許div的固定位置。

這是功能：

$(function(){ // document ready
  if (!!$('.sticky').offset()) { // make sure ".sticky" element exists
    var stickyTop = $('.sticky').offset().top; // returns number 
    $(window).scroll(function() { // scroll event
      var windowTop = $(window).scrollTop(); // returns number 
      if (stickyTop < windowTop) {
    $('.sticky').css({ position: 'fixed', width: 'inherit', top: 10 });
      } else {
    $('.sticky').css('position','static');
      }
    });
  }
});

但是我需要僅在父div內部而不是整個頁面內發生。 這是示例：

http://www.astroprodavnica.com/59/izrada-i-tumacenje-natalne-karte.html

它是右邊的div。

Answer 1

父div position: relative應為position: relative或除static以外的任何其他position: relative （默認情況下使用）。

然后，要定位在該父對象中，子對象應具有position: absolute 。

您可以在此處閱讀有關定位的更多信息。

Answer 2

當您使用固定職位時，您需要使用（相對父職位不適用於固定子職位）

if (windowTop > stickyTop 
  && windowTop < $('.right').offset().top + $('.right').outerHeight(true)) {
    $('.sticky').css({ position: 'fixed', width: 'inherit', top: 10 });
  }else if(windowTop < stickyTop ){
     $('.sticky').css('position','static');
  }else{
    $('.sticky').css('position','absolute').css('bottom', '0px');
  }