Javascript 将div设置为fixed，直到它与其他元素接触并成为绝对值。韩元'；在向上滚动时，无法恢复到“已修复”

我在向产品页面添加粘性滚动“添加到购物车”区域时遇到一些问题

到目前为止，我能够使所选元素在滚动时从某个点变为

position:fixed

，直到达到所谓的“截止点”，即变为

position:absolute

我还编写了一条规则，当我滚动到

位置：固定的“起点”上方时，删除位置样式。所有这些都写在一个函数中，该函数在
$（document.scroll（）
上启动。我将在下面发布我的代码

我写的规则似乎运行良好，除了一件具体的事情。当我向下滚动时，元素变为固定。当固定元素到达“截止点”时，它将切换到
位置：绝对
，并在我继续滚动时保持不变。这就是我想要的

问题是当我开始向上滚动超过“截止点”时，元素的位置不会切换回
位置：已修复
它保持在
位置：绝对
直到我到达页面顶部删除样式。然后我可以再次向下滚动，它将重新开始，固定>绝对>不会恢复到向上滚动时的固定

函数checkOffset（）{
var div1=$（“.ProductMain”）；
var div2=$（“.SideRelatedProducts”）；
var div3=$（“cssmenu”）；
var div1_top=div1.offset（）.top；
var div2_top=div2.offset（）.top；
var div3_top=div3.offset（）.top；
var div1_bottom=div1_top+div1.height（）；
var div2_bottom=div2_top+div2.height（）；
var div3_bottom=div3_top+div3.height（）；
//这就是当元素返回到页面顶部时，从滚动中删除指定的样式
如果（div1\u bottom>=div3\u bottom&&$（window）.width（）>900）{
$（'.ProductMain'）.css({
'位置'：'绝对'，
“顶部”：“自动”，
“底部”：“55px”
});
console.log（“绝对”）；
}
//这就是当元素返回到页面顶部时，从滚动中删除指定的样式
如果（$（文档）.scrollTop（）>$（'.main'）.offset（）.top+20&$（文档）.scrollTop（）+div1.height（）<（div2\u top+75）和&div1\u bottom900）{
$（'.ProductMain'）.css({
'位置'：'固定'，
“顶部”：“60px”，
“底部”：“自动”
})；//向上滚动时还原
console.log（'FIXED'）；
}
//这就是当元素返回到页面顶部时，从滚动中删除指定的样式
if（$（document）.scrollTop（）<$（'.main'）.offset（）.top&$（document）.scrollTop（）+window.innerHeight

谢谢你的帮助
 这似乎已经得到了回答。请尝试以下答案：

您的html是什么样子的？
function checkOffset() {

    var div1 = $(".ProductMain");
    var div2 = $(".SideRelatedProducts");
    var div3 = $("#cssmenu");

    var div1_top = div1.offset().top;
    var div2_top = div2.offset().top;
    var div3_top = div3.offset().top;

    var div1_bottom = div1_top + div1.height();
    var div2_bottom = div2_top + div2.height();
    var div3_bottom = div3_top + div3.height();

  // This is what removes styling assigned from scrolling, when element gets back to top of page

    if (div1_bottom >= div3_bottom && $(window).width() > 900) {
        $('.ProductMain').css({
            'position': 'absolute',
            'top': 'auto',
            'bottom': '55px'
        });
        console.log('ABSOLUTE');
    }

  // This is what removes styling assigned from scrolling, when element gets back to top of page

    if ($(document).scrollTop() > $('.main').offset().top + 20 && $(document).scrollTop() + div1.height() < (div2_top + 75) && div1_bottom < div3_bottom && $(window).width() > 900) {
        $('.ProductMain').css({
            'position': 'fixed',
            'top': '60px',
            'bottom': 'auto'
        }); // restore when you scroll up
        console.log('FIXED');
    }

  // This is what removes styling assigned from scrolling, when element gets back to top of page

    if($(document).scrollTop() < $('.main').offset().top && $(document).scrollTop() + window.innerHeight < div2_top || $(window).width() < 900) {
        $('.ProductMain').removeAttr('style');
    }
}

$(document).scroll(function() {
    checkOffset();
});