relatively-sticky

commit

6fa27649d81bbc969bda64f5aedf5bb2617e3142

parent

a9cdc3ba73a39416ccc1f7dbd6b04c7b0e4430ac

Author

Tobias Bengfort <tobias.bengfort@gmx.net>

Date

2015-01-02 22:22

updated tests

Diffstat

1 files changed, 35 insertions, 43 deletions

diff --git a/test/index.html b/test/index.html

@@ -45,6 +45,10 @@
   45    45       border: 1px solid rgb(0,255,255);
   46    46     }
   47    47 
   -1    48     .item.fluid {
   -1    49         min-width: 30%;
   -1    50     }
   -1    51 
   48    52     .clearfix {
   49    53       overflow: hidden;
   50    54       display: block;
@@ -77,6 +81,12 @@
   77    81       z-index: 100;
   78    82     }
   79    83 
   -1    84     .wrapper {
   -1    85         border: 2em solid blue;
   -1    86         height: 300px;
   -1    87         overflow-y: auto;
   -1    88     }
   -1    89 
   80    90   </style>
   81    91 
   82    92   <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
@@ -87,7 +97,6 @@
   87    97 <div class="buttons">
   88    98   <button class="attach">Attach</button>
   89    99   <button class="detach">Detach</button>
   90    -1   <button class="recalc">Recalc</button>
   91   100 </div>
   92   101 
   93   102 <h1>Basic Stick</h1>
@@ -106,14 +115,6 @@
  106   115   <div class="item full"></div>
  107   116 </div>
  108   117 
  109    -1 <h1>Inner Scroll</h1>
  110    -1 <div class="container one">
  111    -1   <div class="item threequarter"></div>
  112    -1   <div class="item full"></div>
  113    -1   <div class="item onefive"></div>
  114    -1   <div class="item triple"></div>
  115    -1 </div>
  116    -1 
  117   118 <h1>Borders/Margins/Padding</h1>
  118   119 <div class="container one borders">
  119   120   <div class="item"></div>
@@ -121,6 +122,13 @@
  121   122   <div class="item full"></div>
  122   123 </div>
  123   124 
   -1   125 <h1>Item Borders/Margins/Padding</h1>
   -1   126 <div class="container one">
   -1   127   <div class="item borders"></div>
   -1   128   <div class="item half borders"></div>
   -1   129   <div class="item full borders"></div>
   -1   130 </div>
   -1   131 
  124   132 <h1>Right Align</h1>
  125   133 <div class="container one borders" style="text-align: right">
  126   134   <div class="item"></div>
@@ -175,28 +183,25 @@
  175   183   <div class="item full"></div>
  176   184 </div>
  177   185 
  178    -1 
  179    -1 <h1>Custom Spacer Block</h1>
  180    -1 <div class="container one">
  181    -1   <div class="manual_spacer">
  182    -1     <div class="item block use_manual"></div>
   -1   186 <h1>scrollable</h1>
   -1   187 <div class="wrapper">
   -1   188   <div class="container one wrapped">
   -1   189     <div class="item"></div>
   -1   190     <div class="item half"></div>
   -1   191     <div class="item full"></div>
   -1   192   </div>
   -1   193   <div class="container two wrapped">
   -1   194     <div class="item full"></div>
   -1   195     <div class="item"></div>
   -1   196     <div class="item half"></div>
  183   197   </div>
  184    -1   <div class="full static" style="margin: 10px auto; width: 400px;"></div>
  185   198 </div>
  186   199 
  187    -1 <h1>Custom Spacer Float</h1>
   -1   200 <h1>fluid</h1>
  188   201 <div class="container one">
  189    -1   <div class="manual_spacer">
  190    -1     <div class="item float use_manual">
  191    -1       <iframe src="http://leafo.net/hi.png" frameborder="0"></iframe>
  192    -1     </div>
  193    -1   </div>
  194    -1 
  195    -1   <div class="item float right">
  196    -1     <iframe src="http://leafo.net/hi.png" frameborder="0"></iframe>
  197    -1   </div>
  198    -1 
  199    -1   <div class="full static" style="margin: 10px auto; width: 400px;"></div>
   -1   202   <div class="item fluid"></div>
   -1   203   <div class="item fluid half"></div>
   -1   204   <div class="item fluid full"></div>
  200   205 </div>
  201   206 
  202   207 <div class="full"></div>
@@ -220,11 +225,9 @@
  220   225     }
  221   226 
  222   227     function attach() {
  223    -1       $(".container .item:not(.use_manual)").stick_in_parent();
  224    -1 
  225    -1       $(".container .item.use_manual").stick_in_parent({
  226    -1         parent: ".container",
  227    -1         spacer: ".manual_spacer"
   -1   228       $(".container:not(.wrapped) .item").stick_in_parent();
   -1   229       $(".container.wrapped .item").stick_in_parent({
   -1   230         scrollable: ".wrapper"
  228   231       });
  229   232     }
  230   233 
@@ -247,10 +250,6 @@
  247   250     });
  248   251 
  249   252     $(document.body)
  250    -1       .on("click", ".recalc", function() {
  251    -1         console.log("Triggering recalc");
  252    -1         $(document.body).trigger("sticky_kit:recalc")
  253    -1       })
  254   253       .on("click", ".detach", function() {
  255   254         console.log("Triggering detach");
  256   255         $(".container .item").trigger("sticky_kit:detach");
@@ -260,13 +259,6 @@
  260   259         attach();
  261   260       });
  262   261 
  263    -1     $(document.body).on("click", ".grow_element", function(e) {
  264    -1       var elm = $($(e.currentTarget).data("target"));
  265    -1       elm.animate({height: elm.height() * 2}, function() {
  266    -1         $(document.body).trigger("sticky_kit:recalc")
  267    -1       });
  268    -1     });
  269    -1 
  270   262   })();
  271   263 </script>
  272   264