Zebra_Pin Demos

Pin #1

I become pinned when I am at 10px from the window's top *and* I am constrained to my parent element's height.
 

Pin #2

I become pinned when I am at 10px from the window's top and I'll scroll with the document from that point onwards.
 

Pin #3

I am "hard" pinned: I am pinned to my initial position, and I stay like that forever.
 

Pin #1


                var



                    pin = new $.Zebra_Pin($('#pin1'), {

                        top_spacing: 10,

                        contain: true

                    }),

                    $container = $('.pin1-container'),

                    additional_height = -100;



                $('button').bind('click', function() {

                    additional_height = additional_height * -1;

                    $container.css('height', '+=' + additional_height);

                    pin.update();

                });

Pin #2


                new $.Zebra_Pin($('#pin2'), {

                    top_spacing: 10

                });

Pin #3


                new $.Zebra_Pin($('#pin3'), {

                    hard: true

                });
位置1

 

位置2

 

位置3

 

位置4

 

位置5