Advanced Search

Fixed Floated Elements

/ Published in: jQuery
Save to your folder(s)
Creating fixed floated comment's box on right side

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*CSS styles*/
  2. <style>
  3. /* required to avoid jumping */
  4. #commentWrapper { 
  5.   left: 450px;
  6.   position: absolute;
  7.   margin-left: 35px;
  8.   width: 280px;
  9. }
  10.  
  11. #comment {
  12.   position: absolute;
  13.   top: 0;
  14.   /* just used to show how to include the margin in the effect */
  15.   margin-top: 20px;
  16.   border-top: 1px solid purple;
  17.   padding-top: 19px;
  18. }
  19.  
  20. #comment.fixed {
  21.   position: fixed;
  22.   top: 0;
  23. }
  24. </style>
  25. /*end CSS styles*/
  26. /*HTML code*/
  27. <div id="comments">
  28.   <ol>
  29.     <li>Here be the comments from visitors...</li>
  30.     <li>etc...</li>
  31.   </ol>
  32. </div>
  33.  
  34. <div id="commentWrapper">
  35.   <div id="comment">
  36.     <form>
  37.       <!-- take their response -->
  38.     </form>
  39.   </div>
  40. </div>
  41. /*end HTML code*/
  42. /*JQuery*/
  43. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
  44. <script>
  45. $(document).ready(function () {  
  46.   var top = $('#comment').offset().top - parseFloat($('#comment').css('marginTop').replace(/auto/, 0));
  47.   $(window).scroll(function (event) {
  48.     // what the y position of the scroll is
  49.     var y = $(this).scrollTop();
  50.  
  51.     // whether that's below the form
  52.     if (y >= top) {
  53.       // if so, ad the fixed class
  54.       $('#comment').addClass('fixed');
  55.     } else {
  56.       // otherwise remove it
  57.       $('#comment').removeClass('fixed');
  58.     }
  59.   });
  60. });
  61. </script>
  62. /*end JQuery*/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.