Question

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

到目前为止，我可以在滚动时使所选元素从某一点变为position: fixed，直到达到“截止点”为止，它变为position: absolute。

当我在position: fixed的“起点”上方滚动时，我还编写了一条删除位置样式的规则。所有这些都写在一个函数内，该函数在$(document).scroll()上触发。我将在下面发布我的代码。

我写的规则似乎工作得很好，除了一个特定的东西。当我向下滚动时，元素变得固定。当固定元素到达“截止点”时，它会切换到position: absolute并在我继续滚动时停留在那里。这就是我想要的。

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

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

感谢您的帮助！

Answer 1

这似乎已经回答了。请在这里试试这个答案：

Using jQuery to keep scrolling object within visible window

将div设置为fixed，直到它与其他元素接触，然后变为绝对元素。向后滚动

1 个答案: