完全滚动后粘页脚

Posted 2023-03-21

【中文标题】完全滚动后粘页脚

【英文标题】：Sticky footer after complete scroll

【发布时间】：2020-08-12 14:33:03

【问题描述】：

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

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

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

【问题讨论】：

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

【参考方案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");
  
;

谢谢大家