javascript - 隐藏固定的 Div，当页脚 Div 在滚动时出现在屏幕上时

Question

底部有一个固定的 div，当我向下滚动页面时，当页脚 div 开始显示在屏幕上时，我想隐藏该固定的 div，并在我向上滚动时显示固定的 div。

.content{
height:600px;
font-size:30px;
display:flex;
align-items:center;
justify-content:center;}

.fixedDiv{
   padding: 10px;
    background-color: yellow;
    position: fixed;
    bottom: 5%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 10;
}

.footerDiv{
background:red;
height:300px;
width:100%;
font-size:30px;
display:flex;
align-items:center;
justify-content:center;
}

<div class="content">CONTENT
</div>
<div class="fixedDiv">Hide Me When Footer Comes</div>
<div class="footerDiv">FOOTER</div>

标签： javascriptjquery

Answer 1

在即兴创作这个小如何检查滚动后元素是否可见之后？

$(window).scroll(function() {    
   if (isScrolledIntoView('.footerDiv') )
     $('.fixedDiv').css('visibility','hidden');      
   else{
     $('.fixedDiv').css('visibility','visible');
  }
});


function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();    
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;    
  var elemBottom = elemTop + $(elem).height();   

  return ((elemTop < docViewBottom));
 }

https://jsfiddle.net/t0uogj3v/