CODEWITHSUNDEEP
javascriptjqueryhtmlcss
eskimopest
eskimopest

Reputation: 433

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);
  }
  console.log(posFooter);
}
$(document).scroll(function() {
  checkOffset();
});
#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="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  ...
  <div id="chatArea"></div>
</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). https://jsfiddle.net/v92qk4tn/

thanks in advance.

Upvotes: 4

Views: 108

Answers (2)

eskimopest
eskimopest

Reputation: 433

Just figured out how to make this work.

JS function:

function checkOffset() {
    var eTop = $('#footer').offset().top;
    var zero = ($(window).innerHeight()+$(window).scrollTop());
    var posFooter = eTop - zero;

    if(posFooter <= 0) {
        $('#chatArea').css('bottom', -posFooter);
    }
    else {
        $('#chatArea').css('bottom', 0);
    }
}

thanks everyone!

Upvotes: 1

Abhishek Pandey
Abhishek Pandey

Reputation: 13558

I guess you just miss slept an Id name #chatArea https://jsfiddle.net/v92qk4tn/2/

Upvotes: 1

Related Questions