碰撞中的Css / JS隐藏元素

Question

我在客户页面的底部有一张图片。它是屏幕左下角的absolute定位图像，位于页脚div内。

.footer__endrow > .chefBottom {
    left: 0;
    position: absolute;
    bottom: 0;
}

这种方法在桌面上以正常分辨率显示效果很好。但是，当窗口变小时，它会开始与那里的社交图标发生碰撞并落后于它们。

当查看第二张图片时，它自身的视口仍然在普通桌面网站的范围内，因此当它在平板电脑或移动设备上时，我不能将其隐藏起来，因为碰撞已经存在。

有没有办法使用javascript或css在图像与另一个元素发生碰撞时隐藏图像？例如，检测元素是否接触另一个然后隐藏它？

Answer 1

只需在响应模式下使用Chrome开发工具inspect element找到图像与社交图标发生碰撞的断点，然后使用媒体查询隐藏css文件末尾的元素，如

@media screen and (max-width:480px){
  .footer__endrow > .chefBottom{
    display:none;
  }
}

注意：我在这里使用480px作为断点

Answer 2

如果你想用javascript方式制作它，那么最好以这种方式解决。

$(window).on("resize", function(){
   var $imgDiv; // assign image div here
   var $socialIconsDiv; // assign social icon div here
   var $imgDivRightOffset = $($imgDiv).offset().left + $("$imgDiv").outerWidth(); //get image right position
   var $socialIconDivLeftOffset = $($socialIconsDiv).offset().left // get social icons left position

   if( $socialIconDivLeftOffset <= (imgDivRightOffset) ){
      $($socialIconDivLeftOffset).hide();// Hide social icons here
   }
});

Answer 3

嗨您可以检查图像的位置，看看位置是否重叠，如果在if条件下重叠，可以隐藏它。

window.addEventListener('resize', function () {
    var imageOne = document.getElementById('firstImage');
    // check for the image which you want overlapping add the condition as per that.
    if (imageTwo.offsetLeft <= imageOne.offsetLeft) {

        //use this command to hide the image.
        imageOne.style.visibility = 'visible';

    }
});