relatively-sticky

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

commit
3906845705fcce8de9ee036c7fa921ba022ddd5e
parent
6d69c8e4a5dad78d8266308deef7afaf1a7bbbaf
Author
leaf corcoran <leafot@gmail.com>
Date
2013-11-02 01:47
second test bed

Diffstat

A test/two.html 98 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

1 files changed, 98 insertions, 0 deletions


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

@@ -0,0 +1,98 @@
   -1     1 <!DOCTYPE HTML>
   -1     2 <html lang="en">
   -1     3 <head>
   -1     4   <meta charset="UTF-8">
   -1     5   <title></title>
   -1     6   <style type="text/css">
   -1     7   .container {
   -1     8     border: 2px gray dashed;
   -1     9     padding: 10px;
   -1    10   }
   -1    11 
   -1    12   .outer {
   -1    13     border: 2px solid red;
   -1    14     padding: 10px;
   -1    15     overflow: hidden;
   -1    16     width: 600px;
   -1    17     margin: 0 auto;
   -1    18   }
   -1    19 
   -1    20   .left {
   -1    21     float: left;
   -1    22     height: 5000px;
   -1    23     border: 1px solid green;
   -1    24   }
   -1    25 
   -1    26   .right {
   -1    27     float: right;
   -1    28     border: 1px solid blue;
   -1    29     position: relative;
   -1    30   }
   -1    31 
   -1    32   .right div {
   -1    33     margin: 20px 0;
   -1    34   }
   -1    35 
   -1    36   .header {
   -1    37     border: 1px solid red;
   -1    38     width: 600px;
   -1    39     margin: 0 auto;
   -1    40     margin-bottom: 10px;
   -1    41     height: 200px;
   -1    42   }
   -1    43 
   -1    44   .fixed {
   -1    45     height: 95px;
   -1    46     position: fixed;
   -1    47     background: rgba(255, 0, 0, 0.5);
   -1    48     top:0;
   -1    49     left:0;
   -1    50     right:0;
   -1    51   }
   -1    52   
   -1    53   </style>
   -1    54   <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
   -1    55   <script src="../jquery.sticky-kit.js"></script>
   -1    56 </head>
   -1    57 <body>
   -1    58 <div class="fixed">hello</div>
   -1    59 
   -1    60 <div class="container" id="container">
   -1    61   <div class="header">The Header</div>
   -1    62 
   -1    63   <div class="outer">
   -1    64     <div class="left">Hello world</div>
   -1    65     <div class="right">
   -1    66       <div>Piss World</div>
   -1    67       <div>Piss World</div>
   -1    68       <div>Piss World</div>
   -1    69       <div>Piss World</div>
   -1    70       <div>Piss World</div>
   -1    71       <div>Piss World</div>
   -1    72       <div>Piss World</div>
   -1    73       <div>Piss World</div>
   -1    74       <div>Piss World</div>
   -1    75       <div>Piss World</div>
   -1    76       <div>Piss World</div>
   -1    77       <div>Piss World</div>
   -1    78       <div>Piss World</div>
   -1    79       <div>Piss World</div>
   -1    80       <div>Piss World</div>
   -1    81       <div>Piss World</div>
   -1    82       <div>Piss World</div>
   -1    83       <div>Piss World</div>
   -1    84       <div>Piss World</div>
   -1    85       <div>Piss World</div>
   -1    86       <div>Piss World</div>
   -1    87       <div>Piss World</div>
   -1    88       <div>Piss World</div>
   -1    89       <div>Piss World</div>
   -1    90     </div>
   -1    91   </div>
   -1    92 </div>
   -1    93 <script type="text/javascript">
   -1    94   $(".right").stick_in_parent({container: $("#container"), offset_top: 100});
   -1    95 </script>
   -1    96 
   -1    97 </body>
   -1    98 </html>