Return to Snippet

Revision: 64747
at September 14, 2013 17:20 by maddev-

Initial Code
/*CSS styles*/
/* required to avoid jumping */
#commentWrapper { 
  left: 450px;
  position: absolute;
  margin-left: 35px;
  width: 280px;

#comment {
  position: absolute;
  top: 0;
  /* just used to show how to include the margin in the effect */
  margin-top: 20px;
  border-top: 1px solid purple;
  padding-top: 19px;

#comment.fixed {
  position: fixed;
  top: 0;
/*end CSS styles*/
/*HTML code*/
<div id="comments">
    <li>Here be the comments from visitors...</li>

<div id="commentWrapper">
  <div id="comment">
      <!-- take their response -->
/*end HTML code*/
<script src=""></script>
$(document).ready(function () {  
  var top = $('#comment').offset().top - parseFloat($('#comment').css('marginTop').replace(/auto/, 0));
  $(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();
    // whether that's below the form
    if (y >= top) {
      // if so, ad the fixed class
    } else {
      // otherwise remove it
/*end JQuery*/

Initial URL

Initial Description
Creating fixed floated comment's box on right side

Initial Title
Fixed Floated Elements

Initial Tags
css, html, jquery

Initial Language