完全滚动后粘页脚答案

【问题标题】：Sticky footer after complete scroll完全滚动后粘页脚
【发布时间】：2020-08-12 14:33:03
【问题描述】：

我正在尝试创建一个位于页面底部的“另见”按钮。当用户到达底部并决定向上滚动时，我希望它停留在视口的底部。

我一直在尝试使用position:sticky，但是当页面刚刚加载时它已经粘在视口的底部。我只想要在完全向下滚动之后。

有什么线索吗？提前致谢。

【问题讨论】：

当然。粘性元素的位置始终在视口内。也许您需要的是 JavaScript 代码，一旦用户向下滚动足够多，按钮就会出现。

标签： html css footer sticky

【解决方案1】：

这是一个使用 javascript 的示例（见结果sticky button on scroll top

const DIRECTION_BOTTOM = 1;
const DIRECTION_TOP = 0;

let previousScroll = 0;
let direction = scrollY === 0 ? DIRECTION_BOTTOM : DIRECTION_TOP;

window.addEventListener('scroll', function(){
    const scrollY = window.scrollY;

    if(direction === DIRECTION_TOP && previousScroll < scrollY){
        direction = DIRECTION_BOTTOM;

        // remove sticky
        document.getElementById("sticky").classList.remove("show");
    }
    else if(direction === DIRECTION_BOTTOM && previousScroll > scrollY ){
        direction = DIRECTION_TOP;

        // Add sticky 
        document.getElementById("sticky").classList.add("show");
    }

    previousScroll = scrollY;
})

【讨论】：

谢谢！差不多了。现在我只需要在到达页面底部而不是滚动方向时添加类。
更新此代码：删除方向和if条件

【解决方案2】：

您可以使用 JQuery 创建此功能，方法是创建一个计算元素何时在视口中的函数。如果按钮进入视口，添加一个使元素位置的类：粘性。有不同的方法来解决这个问题，但一个解决方案是这样的：

$.fn.isInViewport = function() {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};
  

  
 $(window).on("scroll", function() {
    if($('#button').isInViewport()) {
        $('#button').addClass('sticky');
    }
 });

body {
  text-align: center;
}

.button {
  padding: 6px 12px;
}

.div {
  width: 100%;
  height: 250px;
  color: #fff;
}

.div1 {
  background: blue;
}
.div2 {
  background: red;
 }
 .div3 {
  background: purple;
 }
 
 .sticky {
  position: sticky;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  height: 100%;
  bottom: 5px;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div class="div div1">Filler div 1</div>
<div class="div div2">Filler div 2</div>
<div class="div div3">Filler div 3</div>

<button type="button" class="button" id="button">See Also</button>

【讨论】：

【解决方案3】：

将所有内容加在一起，现在可以正常工作：

window.onscroll = function(ev) {
  if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
    document.getElementById("see-also").classList.add("sticky");
  }
};

谢谢大家

【讨论】：