CODEWITHSUNDEEP
javascriptjquerycss
PI.
PI.

Reputation: 1668

Sticky Footer which docks on top of main footer

I'm looking for a jQuery plugin which recognises when the user has scrolled to the bottom of the page and docks the sticky footer on top of the main footer.

I'm looking for something like the footer of this page.

If this is possible in a few lines of jQuery that would be very helpful too.

Upvotes: 2

Views: 255

Answers (2)

Hastig Zusammenstellen
Hastig Zusammenstellen

Reputation: 4440

Here's a cheap, quick solution to a question long since asked..

code

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>

fiddle

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

credit

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

Upvotes: 0

jami
jami

Reputation: 300

Maybe this can help you. https://github.com/jami/Sticky-Attachment

Upvotes: 1

Related Questions