메인 푸터 상단에 붙어있는 끈적한 바닥 글

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