粘性侧边栏 Javascript / Jquery

问：

我正在尝试使用此JS脚本创建添加粘性侧边栏：

function checkOffset() {
  var sideBarHeight = $('header').height();
  
  if ($('.checkoutcolumn-wrapper').offset().top + $('.checkoutcolumn-wrapper').height() >= $('#shopify-section-related-products-sectioned').offset().top - 160){
    $('.checkoutcolumn-wrapper').css('position', 'absolute');
    $('.checkoutcolumn-wrapper').css('bottom', '0px');
  
    
  }
    
  if ($(document).scrollTop() + window.innerHeight < $('#shopify-section-related-products-sectioned').offset().top) {
    $('.checkoutcolumn-wrapper').css('position', 'fixed');
    $('.checkoutcolumn-wrapper').css('top', sideBarHeight);
    $('.product-single__meta-list').text($('.checkout-column').height());  
  } 
}

HTML 包含的内容很长。该网站可在此处查看：https://hpjs0v1qgyxk8t5v-17118003.shopifypreview.com

我遵循了这个例子：https://jsfiddle.net/Kkv7X

我不明白的问题是设置顶部的距离是固定的。我需要它是 0px，直到它到达顶部，这样它就不会覆盖标题......右？然后对于绝对位置，它需要是 0px。我认为这是与 css 相关的 - 对于绝对定位，底部 0px 似乎在父级之外，但它被设置为相对位置。

任何使用 JS 使其具有粘性的帮助将不胜感激！