relatively-sticky

commit

c981af7f43a2a8f1cf5ea2a0e08302ab5196624d

parent

4f26d87bb2b1708e8581c5581b2d32db875a6adc

Author

leaf corcoran <leafot@gmail.com>

Date

2013-08-01 04:18

more complicated many sticky example

Diffstat

3 files changed, 44 insertions, 7 deletions

diff --git a/site/example.coffee b/site/example.coffee

@@ -1,7 +1,7 @@
    1     1 
    2     2 # make it sticky
    3     3 $ ->
    4    -1   $("[data-sticky_column]").stick_in_parent()
   -1     4   $("[data-sticky_column]").stick_in_parent(parent: "[data-sticky_parent]")
    5     5 
    6     6 window.scroll_it = ->
    7     7   max = $(document).height() - $(window).height()

diff --git a/site/example.scss b/site/example.scss

@@ -50,6 +50,39 @@ h1 {
   50    50         &.tall {
   51    51             height: $viewport_height * 2;
   52    52         }
   -1    53 
   -1    54         &.flat {
   -1    55             border: 0;
   -1    56         }
   -1    57     }
   -1    58 
   -1    59     .inner {
   -1    60         border: 1px solid red;
   -1    61         height: floor($viewport_height / 3);
   -1    62         margin: 10px 0;
   -1    63 
   -1    64         &.static {
   -1    65             margin-top: 0;
   -1    66             border: 1px solid blue;
   -1    67         }
   -1    68     }
   -1    69 
   -1    70     .item {
   -1    71         display: inline-block;
   -1    72         vertical-align: top;
   -1    73         width: 120px;
   -1    74         height: 100px;
   -1    75         border: 1px solid blue;
   -1    76         font-size: 16px;
   -1    77         margin: 10px;
   -1    78 
   -1    79         &.sticky {
   -1    80             border: 1px solid red;
   -1    81         }
   -1    82     }
   -1    83 
   -1    84     .inline_columns {
   -1    85         font-size: 0;
   53    86     }
   54    87 
   55    88     .main {

diff --git a/site/examples/2.html b/site/examples/2.html

@@ -2,16 +2,18 @@
    2     2 <h1>My Better Site</h1>
    3     3 
    4     4 <div class="content double" data-sticky_parent>
    5    -1   <div class="sidebar" data-sticky_column>
   -1     5 
   -1     6   <div class="sidebar alt" data-sticky_column>
    6     7     Welcome to my sidebar
    7     8   </div>
    8     9 
    9    -1   <div class="sidebar alt" data-sticky_column>
   10    -1    Another Sticky Item 
   -1    10   <div class="sidebar flat">
   -1    11     <div class="inner static">One</div>
   -1    12     <div class="inner" data-sticky_column>two</div>
   11    13   </div>
   12    14 
   13    15   <div class="main" data-sticky_column>
   14    -1     This is the main column.
   -1    16     This is the main column
   15    17   </div>
   16    18 </div>
   17    19 
@@ -20,8 +22,10 @@
   20    22     Welcome to my sidebar
   21    23   </div>
   22    24 
   23    -1   <div class="main" data-sticky_column>
   24    -1     This is the main column.
   -1    25   <div class="main inline_columns" data-sticky_column data-sticky_parent>
   -1    26     <div class="item">Hello</div>
   -1    27     <div class="item sticky" data-sticky_column>Sticky</div>
   -1    28     <div class="item">World!</div>
   25    29   </div>
   26    30 </div>
   27    31