Created
July 12, 2018 03:10
-
-
Save anta40/0b55dedc1519217f40043d8d49a873c7 to your computer and use it in GitHub Desktop.
Sticky bar demo
This file contains hidden or 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> | |
| <head> | |
| <script src="jquery-3.3.1.min.js"></script> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| body { | |
| margin: 0; | |
| font-family: Arial; | |
| } | |
| .top-container { | |
| background-color: #f1f1f1; | |
| padding: 30px; | |
| text-align: center; | |
| } | |
| .header { | |
| padding: 10px 16px; | |
| background: #555; | |
| color: #f1f1f1; | |
| } | |
| .content { | |
| padding: 16px; | |
| } | |
| .sticky { | |
| position: fixed; | |
| top: 0; | |
| width: 100%; | |
| } | |
| .sticky + .content { | |
| padding-top: 90px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="top-container"> | |
| <h1>My Sticky Bar Demo</h1> | |
| <p>Scroll down to see the sticky effect....</p> | |
| </div> | |
| <div class="header" id="myHeader"> | |
| <button type="button">Button 1</button> | |
| <button type="button">Button 2</button> | |
| <button type="button">Button 3</button> | |
| <button type="button">Button 4</button> | |
| <button type="button">Button 5</button> | |
| </div> | |
| <div class="content"> | |
| <h3>On Scroll Sticky Header</h3> | |
| <p>The header will stick to the top when you reach its scroll position.</p> | |
| <p>Scroll back up to remove the sticky effect.</p> | |
| <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> | |
| <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> | |
| <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> | |
| <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p><p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> | |
| <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> | |
| <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> | |
| <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> | |
| <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> | |
| </div> | |
| <script> | |
| $(document).ready(function(){ | |
| $("#myHeader").hide(); | |
| }); | |
| window.onscroll = function() {myFunction()}; | |
| window.onload = function() {$('#myHeader').hide()}; | |
| var header = document.getElementById("myHeader"); | |
| var sticky = header.offsetTop; | |
| function myFunction() { | |
| if (window.pageYOffset > sticky) { | |
| header.classList.add("sticky"); | |
| $(header).show(); | |
| } else { | |
| header.classList.remove("sticky"); | |
| $(header).hide(); | |
| } | |
| } | |
| /* | |
| $(window).scroll(function(){ | |
| if ($(this).scrollTop() > 0){ | |
| $('.top-container').show(); | |
| } | |
| else { | |
| $('.top-container').hide(); | |
| } | |
| }*/ | |
| //$('window').scrollDown(function(){$('#myHeader').hide()}); | |
| //$('window').scrollUp(function(){ $('#myHeader').show() }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment