stickypanelview.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 panel 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-sticky-panel__content {
  58. background: yellow !important;
  59. padding: 1em;
  60. }
  61. .ck-sticky-panel__content:after {
  62. content: "A sticky panel 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>