Question

我正在寻找一个jQuery插件，它可以识别用户何时滚动到页面底部并将粘性页脚停靠在主页脚顶部。

我正在寻找类似于this page的页脚的内容。

如果在jQuery的几行中可以做到这一点也非常有帮助。

Answer 1

也许这可以帮到你。 https://github.com/jami/Sticky-Attachment

Answer 2

自从问到这个问题以来，这是一个廉价，快速的解决方案..

<强>码

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

<强>拨弄

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

<强>信用

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

粘贴在主页脚顶部的粘性页脚

2 个答案: