stickytoolbarview.html 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899
  1. <div id="columns">
  2. <div class="column">
  3. <h2>Sticky to the top of the viewport</h2>
  4. <div class="ck-reset ck-editor ck-sticky_to-the-top">
  5. <div class="ck-reset_all ck-editor__top"></div>
  6. <p class="ck-reset">
  7. An editable content mock–up.
  8. An editable content mock–up.
  9. An editable content mock–up.
  10. An editable content mock–up.
  11. An editable content mock–up.
  12. An editable content mock–up.
  13. An editable content mock–up.
  14. An editable content mock–up.
  15. </p>
  16. <div class="ck-reset_all offset-visualizer"></div>
  17. </div>
  18. </div>
  19. <div class="column">
  20. <h2>Sticky to the green box</h2>
  21. <div class="ck-reset ck-editor ck-sticky_to-the-box">
  22. <div class="ck-reset_all ck-editor__top "></div>
  23. <p class="ck-reset">
  24. An editable content mock–up.
  25. An editable content mock–up.
  26. An editable content mock–up.
  27. An editable content mock–up.
  28. An editable content mock–up.
  29. An editable content mock–up.
  30. An editable content mock–up.
  31. An editable content mock–up.
  32. </p>
  33. <div class="ck-reset_all offset-visualizer"></div>
  34. </div>
  35. <div id="fixed">The toolbar should stick to me instead of the viewport.</div>
  36. </div>
  37. </div>
  38. <style>
  39. body {
  40. width: 3000px;
  41. height: 3000px;
  42. padding-top: 150px;
  43. }
  44. #columns {
  45. overflow: hidden;
  46. }
  47. .column {
  48. float: left;
  49. width: 350px;
  50. padding: 1em;
  51. }
  52. .ck-editor {
  53. height: 200px;
  54. background: #ccc;
  55. position: relative;
  56. }
  57. .ck-toolbar {
  58. background: yellow !important;
  59. padding: 1em;
  60. }
  61. .ck-toolbar:after {
  62. content: "A toolbar mock–up.";
  63. }
  64. .offset-visualizer {
  65. height: 50px;
  66. width: 100%;
  67. position: absolute;
  68. bottom: 0;
  69. background: red;
  70. color: #fff;
  71. }
  72. .offset-visualizer:after {
  73. content: "An offset mock–up. Toolbar should *never* cover the red area.";
  74. }
  75. #fixed {
  76. height: 100px;
  77. width: 350px;
  78. position: fixed;
  79. top: 0;
  80. z-index: 9999;
  81. background: green;
  82. opacity: .8;
  83. color: #fff;
  84. box-sizing: border-box;
  85. padding: 30px;
  86. }
  87. </style>