Question

所以我有一个产品页面，其中描述是相对于视口的固定元素。但是，当一直滚动到底部时，元素将与页脚内容重叠，并且它看起来不太好。

我尝试做的是使用jQuery来确定描述元素底部开始与页脚元素顶部重叠的确切点，并将其更改为绝对位置，底部相等到页脚元素的位置。我想要的结果就是它坚持＆＃34;坚持＆＃34;到页脚的顶部，否则会重叠它。

这是我的代码：

$(window).scroll(function() {
    //offset of bottom of element from top
    var osProduct = $('.product-single__meta').offset().top + $('.product-single__meta').height();
    //exact position where footer begins
    var osFooter = $('.return-link-wrapper').offset().top - 83;
    if(osProduct >= osFooter) {
      //change fixed positioning to be sticky to that exact pixel
      $('.product-single__meta').css('position','absolute');
      $('.product-single__meta').css('bottom', osFooter);
    }
    else {
      $('.product-single__meta').css('position','fixed');
      $('.product-single__meta').css('bottom','auto');
    }
});

.product-single__meta 是描述div， .return-link-wrapper 是页脚div。

然而，当我滚过这个重叠点时，描述div开始真正快速地在固定和绝对定位之间切换，而不是按照我想要的方式行事。不用说，最终结果并不像预期的那样。我怎样才能实现这种行为？

Answer 1

我相信这是你正在寻找的代码设置为100你所拥有的div元素远离页面顶部的任何东西。根据您的需求改变休息。这是在jquery btw

(function ($) {
  $(document).ready(function(){

    // first we set the position to relative
    $('.product-single__meta').css('position','relative');

    // position absolute when user scrolls more than 100px
    $(function () {
        $(window).scroll(function () {
            // set distance user needs to scroll before setting css
            if ($(this).scrollTop() > 100) {
                $('.product-single__meta').css('position','absolute');
            } else {
                $('.product-single__meta').css('position','relative');
            }
        });


    });

});
  }(jQuery));

将元素保持在固定位置，直到它与另一个元素相交，使其变为绝对定位

1 个答案: