Preventing a DIV from going below the fold

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...开发者_如何学JAVA Ideas?

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

Thaks

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;
}

Make the positioning of the Comment block absolute http://www.w3schools.com/css/pr_class_position.asp and you can put it whereever you want on the page. You can then bind to scroll events to reposition it when people change the page.