Fixed Floated Elements


/ Published in: jQuery
Save to your folder(s)

Creating fixed floated comment's box on right side


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.