滾動時如何在頁腳前面停止塊？

Question

我有一個“向上”錨鏈接，我希望它在滾動時停在頁腳前面。 滾動時，錨點會下降到頁腳，但必須在頁腳前面停下來。 請幫幫我。我在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並假定浮動頂部的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();
});