0

I need to have a footer in relation to it's parent and I need it to be fixed to the bottom of the window.

I made a calculation to get the right top value but I am missing 8 pixels - this causes the scroll to scroll indefinitely.

What am I missing in my calculation?

$(function () {
  changeFooter();
});

$(window).resize(function () {
  changeFooter();
});
$(window).scroll(function () {
  changeFooter();
});

function changeFooter() {
  var footer = $("#footer");
  footer.css({ top: getFooterTop(footer) + 'px' });
}

function getFooterTop(footer) {
  return window.innerHeight + $(window).scrollTop() - footer.height();
}

function getFooterTopFixed(footer) {
  return window.innerHeight + $(window).scrollTop() - footer.height() - 8;
}
#wrap {
  position:absolute;
  left:0px;
  width: 100%;
  margin-bottom: 50px;
}

#footer {
  position: absolute;
  width: 100%;
  height: 50px;
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
  <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
  <div id="footer"></div>
</div>

https://jsfiddle.net/rs4f1jt0/2/

You can see in the link that -8 pixels fixes the positioning, I just can't figure out where are those 8 pixels coming from to fix the calculation.

Thanks.

Mosh Feu
  • 28,354
  • 16
  • 88
  • 135
Royi Mindel
  • 1,258
  • 12
  • 35
  • 2
    Why don't you use [position: fixed;](https://jsfiddle.net/rs4f1jt0/4/) instead? And your issue is regarding body default margin https://jsfiddle.net/rs4f1jt0/3/ That's a reason you should always use a [reset CSS stylesheet](http://meyerweb.com/eric/tools/css/reset/) – A. Wolff Jan 24 '16 at 08:59
  • `Why don't you use position: fixed; instead` >> `I need to have a footer in relation to it's parent` So i guess your posted example was just a basic one indeed – A. Wolff Jan 24 '16 at 09:04
  • ***⇈⇈*** This would be the solution but still in draft: [CSS position sticky](http://caniuse.com/#feat=css-sticky) – A. Wolff Jan 24 '16 at 09:10
  • I can't use position:fixed because of design related decisions related with page moving animations as we have different footers for different pages and the footer is a part of a page and not a part of the fixed window. as you can't fix a footer to a parent div - you have to use absolute positioning and change the position accordingly. – Royi Mindel Jan 24 '16 at 09:41
  • default margin fixes that, thanks A. Wolff! – Royi Mindel Jan 24 '16 at 09:46
  • Ok but you'd have better to rethink your design because using js/jq for layout purpose only, especially regarding a scroll event, is a no go for sure, too expensive – A. Wolff Jan 24 '16 at 09:49
  • position: fixed should have an option like relative-fixed where it is fixed to a parent div and not to the actual viewport. That design need is pretty common when dealing with SPAs. when dealing with the current fixed positioning you are very limited to fadeIns/outs when dealing with moving between pages in your SPA. We need the pages to move in and out of the screen as a single unit, therefore can't use the fixed position :( - again, this is a very common design case in SPAs :/ If there's a different way to accomplish this i would be glad to hear but i couldn't find one. – Royi Mindel Jan 24 '16 at 09:53
  • Ya i'm completly agree. this is the purpose of [position: sticky;](https://www.w3.org/TR/css3-positioning/#sticky-pos) but looks like removed from draft, not sure why. Maybe too expensive to compute?! – A. Wolff Jan 24 '16 at 09:57
  • As a side note, using position fixed for a element on different document context, such as wrapping it in iframe, could be an alternative i guess – A. Wolff Jan 24 '16 at 10:03
  • 1
    Here i just done a minimalistic demo using iframe: http://jsfiddle.net/ts1xyv85/ – A. Wolff Jan 24 '16 at 10:51
  • I thought it is not recommended to use iframes anymore. in your opinion what's the worse evil? http://stackoverflow.com/questions/23178505/good-reasons-why-not-to-use-iframes-in-page-content – Royi Mindel Jan 24 '16 at 12:24
  • It really depends your use case. Using an iframe just to resolve a layout issue looks like bringing gun to pillow fight. But this would be, in this minimalistic case, really less expensive than requesting the DOM and updating it on each scroll. Like i said before, if possible, all your layout logic should be rethinked if possible. Now if you don't encouter any performance issue on any targeted device, go with your snippet code, it's enough simple to use and implement. – A. Wolff Jan 24 '16 at 12:37
  • In fact, not sure why you couldn't simply set a content wrapper where the sticky element would be absolutely positionned: http://fiddle.jshell.net/c2b8px3d/2/ It should be the easiest solution. – A. Wolff Jan 27 '16 at 09:18
  • I didn't get the last fiddle, it not stuck to the bottom and to get it to stick to the bottom you need to control the top positioning based on the scroll. – Royi Mindel Jan 28 '16 at 10:36
  • Stuck to the bottom, like here http://fiddle.jshell.net/c2b8px3d/4/ ??? – A. Wolff Jan 28 '16 at 10:39

1 Answers1

0

Why not try using position fixed on the footer? Like this:

#wrap {
 position:relative;
 left:0px;
 width: 100%;
 margin-bottom: 50px;
}

#footer {
 position: fixed;
 bottom:0;
 width: 100%;
 height: 50px;
 background-color: green;
}
micaelbolognini
  • 1
  • It won't be related to any offseted parent but viewport. OP just provided a MCVE regarding his issue, i guess. But otherwise ya, a fixed element should be used – A. Wolff Jan 24 '16 at 09:06
  • position:fixed is not an option, reason explained in comments. – Royi Mindel Jan 24 '16 at 09:41