relatively-sticky

A jQuery plugin for creating smart sticky elements
git clone https://git.ce9e.org/relatively-sticky.git

commit
0dfce56df2bae272e2da97d412f81171019446f1
parent
8b67c11e5b6c7496966826ba09c907d6dd3d2c1e
Author
leaf corcoran <leafot@gmail.com>
Date
2013-08-01 04:54
more adjustments to demos

Diffstat

M site/example.coffee 18 +++++++++++++-----
M site/example.scss 2 +-
M site/examples/2.html 22 ++++++++++++++++++++--
M site/index.html 4 ++--

4 files changed, 36 insertions, 10 deletions


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

@@ -3,10 +3,20 @@
    3     3 $ ->
    4     4   $("[data-sticky_column]").stick_in_parent(parent: "[data-sticky_parent]")
    5     5 
   -1     6 
   -1     7 reset_scroll = ->
   -1     8   scroller = $("body,html")
   -1     9   scroller.stop(true)
   -1    10 
   -1    11   if $(window).scrollTop() != 0
   -1    12     console.log "resetting"
   -1    13     scroller.animate({ scrollTop: 0}, "fast")
   -1    14 
   -1    15   scroller
   -1    16 
    6    17 window.scroll_it = ->
    7    18   max = $(document).height() - $(window).height()
    8    -1   $("body,html")
    9    -1     .stop(true)
   -1    19   reset_scroll()
   10    20     .animate({ scrollTop: max }, max*3)
   11    21     .delay(100)
   12    22     .animate({ scrollTop: 0 }, max*3)
@@ -14,9 +24,7 @@ window.scroll_it = ->
   14    24 window.scroll_it_wobble = ->
   15    25   max = $(document).height() - $(window).height()
   16    26   third = Math.floor max / 3
   17    -1 
   18    -1   $("body,html")
   19    -1     .stop(true)
   -1    27   reset_scroll()
   20    28     .animate({ scrollTop: third * 2 }, max*3)
   21    29     .delay(100)
   22    30     .animate({ scrollTop: third }, max*3)

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

@@ -79,7 +79,6 @@ h1 {
   79    79         display: inline-block;
   80    80         vertical-align: top;
   81    81         width: 120px;
   82    -1         height: 100px;
   83    82         border: 1px solid blue;
   84    83         font-size: 16px;
   85    84         margin: 10px;
@@ -88,6 +87,7 @@ h1 {
   88    87 
   89    88         &.sticky {
   90    89             border: 1px solid red;
   -1    90             height: 100px;
   91    91         }
   92    92     }
   93    93 

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

@@ -37,9 +37,27 @@
   37    37   </div>
   38    38 
   39    39   <div class="main inline_columns" data-sticky_column data-sticky_parent>
   40    -1     <div class="item">Hello</div>
   -1    40     <div class="item">
   -1    41       Hello
   -1    42 
   -1    43       <p class="sub">
   -1    44         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id
   -1    45         leo et aliquam. Proin consectetur ligula vel neque cursus laoreet.
   -1    46       </p>
   -1    47 
   -1    48     </div>
   41    49     <div class="item sticky" data-sticky_column>Sticky</div>
   42    -1     <div class="item">World!</div>
   -1    50 
   -1    51 
   -1    52     <div class="item">
   -1    53       World!
   -1    54 
   -1    55       <p class="sub">
   -1    56         In congue nunc vitae magna tempor ultrices. Cras ultricies posuere
   -1    57         elit. Nullam ultrices purus ante, at mattis leo placerat ac.
   -1    58       </span>
   -1    59 
   -1    60     </div>
   43    61   </div>
   44    62 </div>
   45    63 

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

@@ -102,8 +102,8 @@ $("#sticky_item").stick_in_parent(options)
  102   102 following options are accepted:
  103   103 
  104   104 * `parent` -- Controls which element will be the parent of the sticky item. The
  105    -1   dimensions of the parent control when the sticky element sticks and bottoms
  106    -1   out. Defaults to the closest parent of the sticky element.
   -1   105   dimensions of the parent control when the sticky element bottoms out. Defaults
   -1   106   to the closest parent of the sticky element. Can be a selector.
  107   107 * `inner_scrolling` -- Boolean to enable or disable the ability of the sticky
  108   108   element to scroll independently of the scrollbar when it's taller than the
  109   109   viewport. Defaults to `true` for enabled.