javascript 在滚动时覆盖另一个元素顶部时隐藏元素

Posted 2021-05-03

function DivsCollided(){

        var element1 = $('.floating-cta');
        var element2 = $('.product-selector-container .slide-content');

         element1.top = $(element1).offset().top;
         element1.left = $(element1).offset().left;
         element1.right = Number($(element1).offset().left) + Number($(element1).width());
         element1.bottom = Number($(element1).offset().top) + Number($(element1).height());

         element2.top = $(element2).offset().top;
         element2.left = $(element2).offset().left;
         element2.right = Number($(element2).offset().left) + Number($(element2).outerWidth());
         element2.bottom = Number($(element2).offset().top) + Number($(element2).outerHeight());

        if (element1.right > element2.left && element1.left < element2.right && element1.top < element2.bottom && element1.bottom > element2.top){
            element1.addClass('shrink');
        }else{
            element1.removeClass('shrink');
        }
    }
    
    $(window).on('scroll', function () {
        DivsCollided();
	});