javascript - 滚动时如何停止页脚前面的 block ？

Question

我有一个“向上” anchor 链接，我希望它在滚动时停在页脚前面。当有卷轴时， anchor 下降到页脚，但它必须停在它的前面。请帮助我。我在下面添加了 jquery，html css 代码。需要你的帮助。

$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});

<a href="#" class="scrollup" id="social-float" >
<footer  id="footer" class="site-footer flex-y-c">



.scrollup{
   width:40px;
   height:40px;
   position:fixed;
   bottom: 48px;
   right: 48px;
   display:block;
   text-indent: 0;
       svg{
           .a{
              fill: #d2d2d2;
               opacity: 1;  
           }
       }

   }
.scrollup:hover{
   svg{
        .a{
           stroke: none;
           fill: #9BAE88;
       }
   }
}

.scrollup:hover{
   svg{ 
        .b{
           stroke: none;
           fill: #222;
       }
   }
}

.site-footer {
   min-height: 100px;
   // margin-top: 1000px;
   padding: 20px;
   height: 45px;
   font-size: 18px;
   color: #fff;
   background: #222222;

}

Answer 1

假设页脚有一个 id #footer 并假设 float 到顶部有一个 id #social-float。以下代码应该可以工作:

var socialFloat = document.querySelector('#social-float');
var footer = document.querySelector('#footer');

function checkOffset() {
  function getRectTop(el){
    var rect = el.getBoundingClientRect();
    return rect.top;
  }

  if((getRectTop(socialFloat) + document.body.scrollTop) + socialFloat.offsetHeight >= (getRectTop(footer) + document.body.scrollTop) - 10)
    socialFloat.style.position = 'absolute';
  if(document.body.scrollTop + window.innerHeight < (getRectTop(footer) + document.body.scrollTop))
    socialFloat.style.position = 'fixed'; // restore when you scroll up

  socialFloat.innerHTML = document.body.scrollTop + window.innerHeight;
}

document.addEventListener("scroll", function(){
  checkOffset();
});