Make items dock to the bottom of the window if the footer is not visible
I have a sticky footer for my site that was executed 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;
}
It works well. When the content is short, the footer is stacked to the bottom:
When the content is long, the footer is pushed down:
Now I want to place an image on either side of the page sitting on top of the footer, for example: (gray rectangles represent images)
When the content is long and the footer is pushed down, the images should also go down:
However, when the content is so long that the footer is outside the viewport, the images should remain pinned to the bottom of the screen, for example:
I have tried so many combinations of position and display that I lost track, so I really appreciate some guidance on whether what I am trying to achieve is possible and if so what is required. I'm happy to use JQuery if it is helpful to achieve this.
source to share
I would use the jQuery extension scrollToFixed
. This is very efficient and simplified code. I wrote a small example for you to watch:
Note . This extension requires proper HTML formatting, see this example: https://pastebin.com/3gM7vvBR for that .
$(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 on the extension, see page
source to share
I have developed a solution in JQuery. It's pretty 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 pretty simple. When a document loads, scrolls, or resizes its window, the bottom position of the window is calculated. If that point is less than the top of the footer, then the [part] of the footer is within the viewport and the images are set to an absolute position and the bottom matches the height of the footer, so they seem to stick to the footer, Otherwise, if the bottom of the window is above the top of the footer, the footer is not in the viewport, and the images are set to a fixed position so they float to the very bottom of the screen.
This is very smooth as there is no pixel-based repositioning of images, only replacing their positions and footers when the footer crosses the border of the bottom of the window.
It should be both cross browser and the rest of JQuery as it doesn't use anything magic.
source to share