eskimopest eskimopest - 1 month ago 4x
CSS Question

stick div element on footer

I'm trying to make a div stick to footer on window scroll. my code is working almost correct but can't figure out whats missing.

function checkOffset() {
var eTop = $('#footer').offset().top;
var chatTop = $('#chatArea').offset().top + $('#chat').innerHeight();
var zero = ($(window).innerHeight() + $(window).scrollTop());
var posFooter = eTop - zero;
var posChat = chatTop - zero;
if (posChat >= posFooter - 2) {
$('#chatArea').css('bottom', -posFooter);
} else {
$('#chatArea').css('bottom', 0);
$(document).scroll(function() {

#wrapper {
height: 540px;
background-color: #ffffff;
#chatArea {
width: 100%;
position: fixed;
bottom: 0;
padding: 10px;
border: 1px solid red;
#footer {
background-color: #000000;
color: #ffffff;
padding: 20px;
border-top: 2px solid #007cdc;

<script src=""></script>
<div id="wrapper">
<div id="chatArea"></div>
<div id="footer"></div>

This is the fiddle i've done for this case (the height of the wrapper was just for this example).

thanks in advance.


I guess you just miss slept an Id name #chatArea