Posted By

maddev- on 09/14/13

Tagged

Versions (?)

Last Edited at 09/14/13 05:20pm

Statistics

Viewed 531 times

Favorited by 0 user(s)

Related snippets

Fixed Floated Elements

/ Published in: jQuery

Creating fixed floated comment's box on right side

Highlighted TextExpand

/*CSS styles*/
<style>
/* 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;
}
</style>
/*end CSS styles*/
/*HTML code*/
<div id="comments">
  <ol>
    <li>Here be the comments from visitors...</li>
    <li>etc...</li>
  </ol>
</div>

<div id="commentWrapper">
  <div id="comment">
    <form>
      
    </form>
  </div>
</div>
/*end HTML code*/
/*JQuery*/
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<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
      $('#comment').addClass('fixed');
    } else {
      // otherwise remove it
      $('#comment').removeClass('fixed');
    }
  });
});
</script>
/*end JQuery*/

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.