完成滚动后的粘性页脚

Question

我正在尝试创建一个位于页面底部的 "see-also" 按钮。当用户到达底部并决定向上滚动时，我希望它粘在视口底部。

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

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

Answer 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;
})

Answer 2

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

$.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>

Answer 3

将所有内容混合在一起，现在可以使用了：

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

谢谢大家

完成滚动后的粘性页脚

Sticky footer after complete scroll

html

css

sticky

footer