Advanced Search

Return to Snippet

Revision: 64747
at September 14, 2013 17:20 by maddev-
Initial Code 
/*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>
      <!-- take their response -->
    </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*/
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
                                        

                                    

                                    
jQuery