Question

I have a HTML like like so:

<div id="window">
  <p>Random length of text</p>
  <p>Random length of text</p>
  <p>Random length of text</p>
  <div id="comment"> input ...</div>
</div>

The text is random. What I would like to do is if the id=”comment” is ever scrolled off the page, below the fold for example, then I want to add a class “fixed” so I can ensure that id=”comment is always visible on the page.

I tried something like this, but it isn’t working… Ideas?

$('#comment').offset().top  
$('window').scrollTop()

Thaks

Answer 1

Do you mean that you want the comment div to be stuck to the bottom of the screen independent of the user’s scrolling? Because that can be done with just CSS i.e.

#comment {
    position: fixed;
    bottom: 0;
}

Or maybe you want it to stick to the bottom of the paragraphs, IF they dont fill the full height of the screen? In which case you could use jQuery to dynamically set the above CSS rules depending on the position of the comment div i.e.

jQuery

$(document).ready(function()
{
    bottom = $("#comment").position().top + $("#comment").height();
    if (bottom > $(window).height()) $("#comment").addClass("fixed-bottom");
});

CSS

.fixed-bottom {
    position: fixed;
    bottom: 0;
}