Make elements stick to bottom of window unless footer is visible

Question

I've got a sticky footer for my site which was accomplished with the following.

html {
    position: relative;
    min-height:100%;
}

body {
    margin: 0 0 100px;
    text-align: center;
}

footer {
    position:absolute;
    left:0;
    bottom:0;
    height:100px;
    width:100%;
    background-color:red;
}

This works well. When the content is short, the footer sticks to the bottom:

When the content is long, the footer is pushed down:

I now want to place an image on either side of the page sitting on top of the footer, like this: (the grey boxes represent the images)

When the content is long and the footer is pushed down, the images should move down too:

However, when the content is so long that the footer is outside of the viewport, the images should remain stuck to the bottom of the screen, like so:

I have tried so many combinations of position and display that I've lost track, so would really appreciate some guidance on whether what I'm trying to achieve is possible and if so what is required. I am happy to use JQuery if that would be useful in accomplishing this goal.

Post your HTML and what's the significance of the gray images? — Waxi, Apr 11 '17 at 15:33
There is a lot of HTML for this site. Are there specific parts you need? The grey boxes represent the images I want to be stuck to the top of the footer when it is visible. — mashers, Apr 11 '17 at 15:37
@mashers I think the images really helped in understanding desired functionality. — Neil, Apr 11 '17 at 15:38
I ask for the HTML because your footer should never move down if it's truly a sticky footer, regardless of how much content there may be, so that seems like a problem in itself, before you even get to the gray part. I understand you want the gray boxes on top, but why, what is it ultimately? Are they images, text, spacers? — Waxi, Apr 11 '17 at 15:40
@nfnneil - do you mean the images I used in the question to illustrate it? — mashers, Apr 11 '17 at 15:40
@Waxi - the footer should move down if the content is longer than the viewport. That is how it is intended to function. — mashers, Apr 11 '17 at 15:41

Neil · Answer 1 · 2017-04-11T16:40:49.907

2

I would use the jQuery extension scrollToFixed. It is highly effective and simplified code. I wrote up a small example for you to look at:

Note: This extension does require proper HTML formmating, for that, see this example: https://pastebin.com/3gM7vvBR .

$(document).ready(function() {
    $('#footer').scrollToFixed( {
        bottom: 0,
        limit: $('#footer').offset().top,
    });
});

#footer {
  background:red;
  padding:10px;
  text-align:center;
}

body {
  padding:0;
  margin:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollToFixed/1.0.8/jquery-scrolltofixed-min.js"></script>

<div style="background:blue;height:700px;"></div>
<div id="footer">Test footer</div>
<div>Testing more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuffTesting more stuff</div>

For more information about the extension, visit:

https://bigspotteddog.github.io/ScrollToFixed/

edited Apr 11 '17 at 16:40

answered Apr 11 '17 at 15:37

Neil

14,063
3
30
51

Interesting idea. In the example you've provided, it looks like the footer is the thing that's floating constantly until it reaches some content below. However, the principle is the same so I should be able to work with this. I'll import the extension and see if I can use it before accepting. Thanks! – mashers Apr 11 '17 at 15:40
@mashers Just comment if you have any more questions. – Neil Apr 11 '17 at 15:41
It's strange, I copied the css, scripts and HTML into a .html file and tested it, but the red footer div just scrolled as normal with the rest of the page. No errors or warnings in the console. If I changed the bottom parameter of scrollToFixed to 100 then I could see the footer bar floating 100px from the bottom and it stayed there until the scroll bar reached it, at which point it went and stuck above the div with text inside which is what would be expected. But it doesn't work if 'bottom' is set to 0 :/ – mashers Apr 11 '17 at 16:11
@mashers Files can display oddly if just run in browser (do to permissions). Are you running it through WAMP or XAMPP? – Neil Apr 11 '17 at 16:12
No I'm just running it in a browser, but the html file is uploaded to my web server not run locally. It's not a permissions issue as the jquery libraries are being included. – mashers Apr 11 '17 at 16:13
@mashers I"ll look into it. – Neil Apr 11 '17 at 16:20
It still doesn't work with the other version of scrollToFixed. Would you mind taking a look at the test html page for me please? `https://pastebin.com/tfWC6K7e` – mashers Apr 11 '17 at 16:21
Thank you @nfnneil – mashers Apr 11 '17 at 16:21
@mashers Check out: https://pastebin.com/3gM7vvBR . I think it just requires proper HTML formatting, if you could mark as solution, it'd help a lot. – Neil Apr 11 '17 at 16:40
I've just tried it and it didn't work unfortunately :( I've just implemented my own JQuery solution which doesn't require any plugins. I'll post it as a separate answer so you can see. – mashers Apr 11 '17 at 17:31

score 0 · Accepted Answer · answered Apr 11 '17 at 17:42

I've devised a solution in JQuery. It's quite simple.

HTML:

<div id='leftimage' class='sideImage' style='left:0px;'>
    <img src='playleft.png' style='width:100%;'>
</div>

<div id='rightimage' class='sideImage' style='right:0px;'
    <img src='playright.png' style='width:100%;'>
</div>  

<footer id='footer'>Footer content here</footer>

CSS:

.sideImage {
    position:fixed;
    bottom:100px;
    width:275px;
}

JQuery:

$(document).scroll(function(){
    repositionSideImages();
});

$( window ).resize(function() {
    repositionSideImages();
});

$(document).ready(function() {
    repositionSideImages();
});

function repositionSideImages() {   
    var footer = $("#footer");
    var footerTop = $(footer).offset().top;

    var scrollTop = $(document).scrollTop();
    var windowHeight = $(window).height();
    var windowBottom = scrollTop + windowHeight;

    repositionImage($("#leftimage"), windowBottom, footerTop, footer.height());
    repositionImage($("#rightimage"), windowBottom, footerTop, footer.height());
}

function repositionImage(image, windowBottom, footerTop, footerHeight) {
    if (windowBottom >= footerTop) {
        $(image).css({"position":"absolute", "bottom":footerHeight});
    }
    else {
        $(image).css({"position":"fixed", "bottom":"0px"});
    }
}

It's quite simple really. When the document loads, is scrolled or has its window resized, the bottom position of the window is calculated. If this point is lower than the top of the footer, then [part of] the footer is within the viewport and the images are set to absolute position with the bottom set to the height of the footer, so they appear to stick to the footer. Otherwise, if the bottom point of the window is above the the top of the footer, then the footer is not within the viewport and the images are set to fixed positioning so they float at the very bottom of the screen.

It's very smooth as there is no repositioning of the images on a per-pixel basis, only swapping their position and bottom attributes as and when the footer crosses the boundary of the bottom of the window.

This should be as cross-browser as the rest of JQuery as it doesn't use anything magical.

Make elements stick to bottom of window unless footer is visible

2 Answers2