Created
December 17, 2014 20:49
-
-
Save fabioyamate/f9c1e2293b39b4d8813d to your computer and use it in GitHub Desktop.
Affix test
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>jQuery Snippet</title> | |
| <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | |
| <style> | |
| #text {height: 100%; background-color: pink} | |
| #header { background-color: red; } | |
| #header.affix { | |
| background-color: blue; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| color: white; | |
| z-index: 2; | |
| } | |
| #header.affix-top { | |
| background-color: yellow; | |
| } | |
| #header.affix-bottom { | |
| background-color: green; | |
| } | |
| #sidebar { background-color: darkred; } | |
| #sidebar.affix { | |
| background-color: darkblue; | |
| top: 90px; | |
| right: 0; | |
| bottom: 0; | |
| overflow-y: auto; | |
| color: white; | |
| } | |
| #sidebar.affix-top { | |
| background-color: orange; | |
| } | |
| #sidebar.affix-bottom { | |
| background-color: darkgreen; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container"> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim varius dui non sodales. Nulla sed dolor eu nunc venenatis posuere. Cras a diam magna. Maecenas in rutrum elit, vestibulum sagittis sem. Donec sagittis, leo a laoreet molestie, risus justo molestie dui, ullamcorper aliquet nulla velit ac libero. Cras rhoncus eleifend tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam feugiat turpis tincidunt leo venenatis convallis. Phasellus pretium, mi vitae rutrum gravida, mauris dui dignissim odio, ac porta lectus mi eu nunc. Nam fringilla pulvinar luctus. Curabitur luctus urna eu lacus tincidunt laoreet nec sed diam. Phasellus nunc nisi, sodales in mattis sed, tempus non quam. Cras dui leo, condimentum vel nisl dictum, suscipit aliquet felis. Maecenas at condimentum magna, ac suscipit ex.</p> | |
| </div> | |
| </div> | |
| <div> | |
| <div id="header"> | |
| <div class="row"> | |
| <div class="col-md-12"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim varius dui non sodales. Nulla sed dolor eu nunc venenatis posuere. Cras a diam magna. Maecenas in rutrum elit, vestibulum sagittis sem. Donec sagittis, leo a laoreet molestie, risus justo molestie dui, ullamcorper aliquet nulla velit ac libero. Cras rhoncus eleifend tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam feugiat turpis tincidunt leo venenatis convallis. Phasellus pretium, mi vitae rutrum gravida, mauris dui dignissim odio, ac porta lectus mi eu nunc. Nam fringilla pulvinar luctus. Curabitur luctus urna eu lacus tincidunt laoreet nec sed diam. Phasellus nunc nisi, sodales in mattis sed, tempus non quam. Cras dui leo, condimentum vel nisl dictum, suscipit aliquet felis. Maecenas at condimentum magna, ac suscipit ex.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="header-fix" class="hidden"></div> | |
| </div> | |
| <div class="row"> | |
| <div class="col-md-9"> | |
| <div id="text"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dignissim varius dui non sodales. Nulla sed dolor eu nunc venenatis posuere. Cras a diam magna. Maecenas in rutrum elit, vestibulum sagittis sem. Donec sagittis, leo a laoreet molestie, risus justo molestie dui, ullamcorper aliquet nulla velit ac libero. Cras rhoncus eleifend tincidunt. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam feugiat turpis tincidunt leo venenatis convallis. Phasellus pretium, mi vitae rutrum gravida, mauris dui dignissim odio, ac porta lectus mi eu nunc. Nam fringilla pulvinar luctus. Curabitur luctus urna eu lacus tincidunt laoreet nec sed diam. Phasellus nunc nisi, sodales in mattis sed, tempus non quam. Cras dui leo, condimentum vel nisl dictum, suscipit aliquet felis. Maecenas at condimentum magna, ac suscipit ex.</p> | |
| </div> | |
| </div> | |
| <div id="sidebar" class="col-md-3"> | |
| <p>Proin ullamcorper id diam ac porta. Nulla sollicitudin consectetur libero. Donec nec nulla erat. Donec facilisis at diam nec posuere. Vestibulum faucibus sem vitae urna scelerisque, id laoreet odio porta. Sed ut posuere mi, eu lacinia ipsum. Aliquam justo urna, placerat id lorem ut, lacinia volutpat nunc. Nullam ut feugiat mauris, id bibendum libero. Phasellus posuere urna id mi dapibus molestie. Aliquam at blandit est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at condimentum turpis. Nunc at erat egestas turpis eleifend tempor at pulvinar purus. Phasellus quis est sed arcu tempus efficitur vitae a nunc. Duis auctor, ante ac lobortis semper, lacus nisi maximus arcu, et venenatis dui est id enim. Phasellus auctor facilisis ante, sit amet ultricies massa ullamcorper sed.</p> | |
| <p>Curabitur a felis dapibus, cursus elit nec, ultricies urna. Nulla facilisi. Fusce in dolor sit amet mauris fringilla consectetur. Curabitur ultricies est magna, ac commodo dolor lobortis a. Maecenas pellentesque bibendum leo. Fusce eleifend ante neque. Vestibulum efficitur turpis ac velit tincidunt elementum.</p> | |
| <p>Proin ullamcorper id diam ac porta. Nulla sollicitudin consectetur libero. Donec nec nulla erat. Donec facilisis at diam nec posuere. Vestibulum faucibus sem vitae urna scelerisque, id laoreet odio porta. Sed ut posuere mi, eu lacinia ipsum. Aliquam justo urna, placerat id lorem ut, lacinia volutpat nunc. Nullam ut feugiat mauris, id bibendum libero. Phasellus posuere urna id mi dapibus molestie. Aliquam at blandit est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at condimentum turpis. Nunc at erat egestas turpis eleifend tempor at pulvinar purus. Phasellus quis est sed arcu tempus efficitur vitae a nunc. Duis auctor, ante ac lobortis semper, lacus nisi maximus arcu, et venenatis dui est id enim. Phasellus auctor facilisis ante, sit amet ultricies massa ullamcorper sed.</p> | |
| <p>Proin ullamcorper id diam ac porta. Nulla sollicitudin consectetur libero. Donec nec nulla erat. Donec facilisis at diam nec posuere. Vestibulum faucibus sem vitae urna scelerisque, id laoreet odio porta. Sed ut posuere mi, eu lacinia ipsum. Aliquam justo urna, placerat id lorem ut, lacinia volutpat nunc. Nullam ut feugiat mauris, id bibendum libero. Phasellus posuere urna id mi dapibus molestie. Aliquam at blandit est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at condimentum turpis. Nunc at erat egestas turpis eleifend tempor at pulvinar purus. Phasellus quis est sed arcu tempus efficitur vitae a nunc. Duis auctor, ante ac lobortis semper, lacus nisi maximus arcu, et venenatis dui est id enim. Phasellus auctor facilisis ante, sit amet ultricies massa ullamcorper sed.</p> | |
| <p>Curabitur a felis dapibus, cursus elit nec, ultricies urna. Nulla facilisi. Fusce in dolor sit amet mauris fringilla consectetur. Curabitur ultricies est magna, ac commodo dolor lobortis a. Maecenas pellentesque bibendum leo. Fusce eleifend ante neque. Vestibulum efficitur turpis ac velit tincidunt elementum.</p> | |
| <p>Proin ullamcorper id diam ac porta. Nulla sollicitudin consectetur libero. Donec nec nulla erat. Donec facilisis at diam nec posuere. Vestibulum faucibus sem vitae urna scelerisque, id laoreet odio porta. Sed ut posuere mi, eu lacinia ipsum. Aliquam justo urna, placerat id lorem ut, lacinia volutpat nunc. Nullam ut feugiat mauris, id bibendum libero. Phasellus posuere urna id mi dapibus molestie. Aliquam at blandit est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at condimentum turpis. Nunc at erat egestas turpis eleifend tempor at pulvinar purus. Phasellus quis est sed arcu tempus efficitur vitae a nunc. Duis auctor, ante ac lobortis semper, lacus nisi maximus arcu, et venenatis dui est id enim. Phasellus auctor facilisis ante, sit amet ultricies massa ullamcorper sed.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="debug"> | |
| </div> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> | |
| <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
| <script src="http://underscorejs.org/underscore-min.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/underscore-contrib/0.1.4/underscore-contrib.min.js"></script> | |
| <script> | |
| $(function($) { | |
| var top = $('#header').offset().top; | |
| console.log('before affix', top); | |
| var h = $('#header').height(); | |
| $('#header-fix').height(h); | |
| $('#header').affix({ | |
| offset: { | |
| top: top | |
| } | |
| }).on('affix.bs.affix', function() { | |
| $('#header-fix').removeClass('hidden').addClass('invisible'); | |
| }).on('affix-top.bs.affix', function() { | |
| $('#header-fix').removeClass('invisible').addClass('hidden'); | |
| }); | |
| // console.log('header', $('#header').offset().top, 'sidebar', $('#sidebar').offset().top); | |
| // | |
| // $('#sidebar').affix({ | |
| // offset: { | |
| // top: top | |
| // } | |
| // }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment