CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mashers
mashers

Reputation: 1089

Make elements stick to bottom of window unless footer is visible

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:

Sticky footer 1

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

enter image description here

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)

enter image description here

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

enter image description here

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:

enter image description here

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.

Upvotes: 3

Views: 1714

Answers (2)

mashers
mashers

Reputation: 1089

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.

Upvotes: 0

Neil
Neil

Reputation: 14313

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/

Upvotes: 2

Related Questions