粘性頁腳停靠在主頁腳頂部

Question

我正在尋找一個jQuery插件，它可以識別用戶何時滾動到頁面底部並將粘性頁腳停靠在主頁腳頂部。

我正在尋找類似this page的頁腳。

如果這在幾行jQuery中是可能的，那也是非常有用的。

Answer 1

也許這可以幫助你。 https://github.com/jami/Sticky-Attachment

Answer 2

這是一種廉價，快速的解決問題早已問..

代碼

var footerstickyHeight = $('.footer-sticky').height(); 
 
var windowHeight = $(window).height(); 
 
$(window).scroll(function() { 
 
    var footerToTop = $('.footer').offset().top; 
 
    var triggerAt = footerToTop + footerstickyHeight; 
 
    var windowToTop = $(window).scrollTop(); 
 
    if (windowToTop + windowHeight > triggerAt) { 
 
    $('.footer-sticky').removeClass('fixed'); 
 
    } else { 
 
    $('.footer-sticky').addClass('fixed'); 
 
    } 
 
})

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow-x: hidden; 
 
} 
 
div { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-direction: column; 
 
    width: 100vw; 
 
} 
 
.header { 
 
    height: 111px; 
 
    background-color: orange; 
 
} 
 
.main { 
 
    height: 888px; 
 
    background-color: gray; 
 
} 
 
.footer { 
 
    background-color: dimgray; 
 
} 
 
.footer-sticky { 
 
    height: 33px; 
 
    background-color: dimgray; 
 
} 
 
.footer-sticky.fixed { 
 
    position: fixed; 
 
    bottom: 0; 
 
    left: 0; right: 0; 
 
} 
 
.footer-more { 
 
    height: 66px; 
 
    background-color: dimgray; 
 
    border-style: solid; 
 
    border-color: hsla(0, 0%, 0%, 0.1); 
 
    border-width: 1px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="header">Header</div> 
 
<div class="main">Content</div> 
 
<div class="footer"> 
 
    <div class="footer-sticky fixed">sticky footer</div> 
 
    <div class="footer-more">more information</div> 
 
</div>

小提琴

https://jsfiddle.net/Hastig/ztox79sd/

信貸

https://stackoverflow.com/a/20675351/3377049