メインフッターの上にドッキングするスティッキーフッター

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