在父母Div结束时释放固定Div

Question

我有以下代码

    if ($('body').hasClass('catalog-product-view')) {
        var  scrollTop = $(this).scrollTop();
        var el = document.getElementsByClassName("product-img-box")[0];
        var footerx = document.getElementsByClassName("main-footer")[0];
            var body = document.body,
    html = document.documentElement;

    var height = Math.max( body.scrollHeight, body.offsetHeight, 
               html.clientHeight, html.scrollHeight, html.offsetHeight );
         window.alert(scrollTop+','+footerx.offsetTop);
        if (scrollTop > footerx.offsetTop )
        {
            $('.product-img-box').css('position', 'absolute');
        }else
        {
            $('.product-img-box').css('position', 'fixed');
        }
    }

我试图让元素（el）在触及页脚（footerx）时将位置从固定更改为绝对。但是，我仍然在重叠页脚。问题是： 1-我觉得我做了大多数高度计算，滚动顶部，似乎我的问题是什么时候从固定切换到绝对。我该怎么做这个计算？ 2-如果我想在某个给定的末尾从固定切换到绝对怎么办？

第一个问题的答案将受到高度赞赏，第二个问题是出于好奇和很高兴知道。