I've always used jQuery references to make a sticky footer for my sites. Now that im using AngularJS, there has been no need for me to use jQuery too. However, i cant seem to use my normal sticky footer code as $ is undefined.
HTML:
<h1>Basic plunk!</h1>
<p>If the header above is red, then you know Plunker is working!</p>
<p>The header above should slide right, indicating that jQuery is up and running.</p>
<!-- Put your html here! -->
<div id="page">
1
<br>2
<br>3
<br>4
<br>
</div>
<br>
<footer id="colophon">My footer</footer>
JS:
<script type="text/javascript">
$(document).ready(function() {
var bodyHeight = $("body").height();
var vwptHeight = $(window).height();
if (vwptHeight > bodyHeight) {
$("footer#colophon").css("position","absolute").css("bottom",0);
}
});
</script>
How can i perform the above but in an Angular friendly way?
Here's a plunker: http://plnkr.co/edit/k1EZqwpdXbKhODW4FyeF?p=preview
A real sticky footer is simple to implement:
footer {
position: fixed;
bottom: 0;
}
No jQuery, no Angular, plain CSS: http://plnkr.co/edit/W6NcqlRDQ4K6XkGSBEJR?p=preview
But, a footer that's sticky only when there's some room left between the bottom body edge and the bottom window edge will require a wrapper/container for the body (excluding footer) which will have 100% height "pushing" the footer downwards. Then, the wrapper's negative bottom margin should equal footer's height (in order not to have it always "under" the page). Wrapper's pseudo-element is used to block the footer from going into the content in case the content overflows the body.
Something like this: http://plnkr.co/edit/FySWHhIBqYGRQhppN7bA?p=preview
Works with window resizing and no JS needed.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.