檢查元素的 position 是否等於頂部：50%； 剩下：50%；

Question

我有這個 function （它確定grid-container是否在grid-container-wrapper內部，如果不是，它會將grid-container移動到頁面中間， top: 50%; left: 50%;

$(window).resize(function() {
        if(document.getElementsByClassName('grid-container')[0].getBoundingClientRect().right > document.getElementsByClassName('grid-container-wrapper')[0].getBoundingClientRect().right || document.getElementsByClassName('grid-container')[0].getBoundingClientRect().bottom > document.getElementsByClassName('grid-container-wrapper')[0].getBoundingClientRect().bottom || $('.grid-container').position().left < $('.grid-container-wrapper').position().left || $('.grid-container').position().top < $('.grid-container-wrapper').position().top) {
            $('.grid-container').animate({opacity:0}, 200, function() {
                $('.grid-container').css('top', '50%');
                $('.grid-container').css('left', '50%');
                $('.grid-container').css('transform', 'translate(-50%, -50%)');
            } );

            $('.grid-container').animate({opacity:1}, 400);
        }
    });

但是，如果grid-container已經定位到top: 50%; left: 50%; 並且沒有被移動（所以 position 仍然等於left: 50%; and top: 50%; ），我不希望 function 被執行，即使grid-container在grid-container-wrapper之外.

有沒有辦法做到這一點？

Answer 1

如果您已經定位到頂部：50%； 左：50% 你可以添加一個 class 像“stopResisize”到網格容器或任何其他字段，當調整 function 開始時，看看這個 ZA2F2ED4F8EBC2CBB14C21A29DZ40 是否存在。 如果是這樣，則不做任何事情就返回。

$(window).resize(function() {
  if($('.grid-container').classList.contains("stopResisize")) return;
  if ( ... ) {
    ...
    $('.grid-container').classList.add('stopResisize');
  }
}

Answer 2

$(window).resize(function() {
    if(document.getElementsByClassName('grid-container')[0].getBoundingClientRect().right > document.getElementsByClassName('grid-container-wrapper')[0].getBoundingClientRect().right || document.getElementsByClassName('grid-container')[0].getBoundingClientRect().bottom > document.getElementsByClassName('grid-container-wrapper')[0].getBoundingClientRect().bottom || $('.grid-container').position().left < $('.grid-container-wrapper').position().left || $('.grid-container').position().top < $('.grid-container-wrapper').position().top) {
        if(window.innerWidth - document.getElementsByClassName('grid-container')[0].getBoundingClientRect().right + 20 < $('.grid-container').position().left || window.innerWidth - document.getElementsByClassName('grid-container')[0].getBoundingClientRect().right - 20 > $('.grid-container').position().left || document.getElementsByClassName('grid-container-wrapper')[0].getBoundingClientRect().bottom - document.getElementsByClassName('grid-container')[0].getBoundingClientRect().bottom + 20 < $('.grid-container').position().top || document.getElementsByClassName('grid-container-wrapper')[0].getBoundingClientRect().bottom - document.getElementsByClassName('grid-container')[0].getBoundingClientRect().bottom - 20 > $('.grid-container').position().top) {
            $('.grid-container').animate({opacity:0}, 200, function() {
                $('.grid-container').css('top', '50%');
                $('.grid-container').css('left', '50%');
                $('.grid-container').css('transform', 'translate(-50%, -50%)');
            } );

            $('.grid-container').animate({opacity:1}, 400);
        }
    }
});