CODEWITHSUNDEEP
htmlcss
algiogia
algiogia

Reputation: 955

Panel floating inside div

I have a page with a header, body and footer. There is also a chat panel displayed at the bottom of the page that floats when the page scrolls.

I've used position:fixed; bottom:0px; but the chat panel overlaps the page footer.

How can I make the panel stop from overlapping the footer? I tried putting the panel in the body's div but didn't work.

Here is some example code:

<html>
<body>
  <div id="body">
    <div>
      Body content...
    </div>
    <div style="position:fixed;bottom:0px;right:100px;border:solid 1px black;background-color:orange;">
      This is the chat panel
    </div>
  </div>
  <div id="footer" style="background-color: gray;">This is the footer</div>
</body>
</html>

And here two screenshots of the expected behaviour: In mid page midpage

and when reaching the bottom bottom

Upvotes: 2

Views: 3769

Answers (1)

Thomas Bormans
Thomas Bormans

Reputation: 5362

This should work and do what you want it to do. You can probably optimise it so it scrolls smoothly together with the footer when reaching the bottom.

http://jsfiddle.net/4cgyjpqt/3/

CSS:

body, html {
    margin: 0;
    padding: 0;
}
#footer {
    width: 100%;
    background-color: gray;
    height: 40px;
}
.panel {
    position:fixed;
    bottom:20px;
    right:100px;
    border:solid 1px black;
    background-color:orange;
}

jQuery:

$(function () {
     var $win = $(window);

     $win.scroll(function () {
         if ($win.height() + $win.scrollTop() == $(document).height()) {
            // When the user is at the bottom of the page, get the footer height
             var footer = $('#footer').height();
             // set footer height as number of px from bottom
             $('.panel').css('bottom', footer);
         } else {
            // When the user is not at the bottom, set bottom back to 0px
             $('.panel').css('bottom', '0px');
         }
     });
 });

Upvotes: 3

Related Questions