login  Naam:   Wachtwoord: 
Registreer je!
 Scripts:

Scripts > JS > jQuery Snippets > sticky navigatiebalk

sticky navigatiebalk

Auteur: Thomas - 10 januari 2014 - 11:45 - Gekeurd door: marten - Hits: 6868 - Aantal punten: 4.25 (2 stemmen)




Op deze site kwam ik een leuk effect tegen: als je naar beneden scrollt door een pagina blijft de navigatiebalk aan de bovenkant van je scherm plakken. Ik heb even in de broncode zitten neuzen en het was ontzettend makkelijk om dit effect te reproduceren door gebruikmaking van scroll() en scrollTop().

Het onderstaande knip- en plakvoorbeeld beschrijft het principe; wel zorgen dat het content-gedeelte hoger is dan je scherm uiteraard, en even scrollen natuurlijk...

Code:
  1. <!DOCTYPE html>
  2. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  3. <title>sticky navigation</title>
  4. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  5. <style type="text/css">
  6. <!--
  7. html { height: 100%; margin: 0; padding: 0; }
  8. body { height: 100%; margin: 0; padding: 0; }
  9. div.wrapper { margin: 0 auto; width: 850px; min-height: 100%; position: relative; background-color: #f0f0ff; }
  10. div.header { width: 850px; height: 100px; background-color: #ffd0d0; }
  11. div.nav-wrapper { min-height: 50px; } /* voor het tegengaan van het verspringen van #navigation */
  12. div.navbox-1 { width: 850px; height: 25px; line-height: 25px; background-color: #d0ffd0; }
  13. div.navbox-2 { width: 850px; height: 25px; line-height: 25px; background-color: #b0ffb0; }
  14. div#navigation.sticky { position: fixed; top: 0; z-index: 1; }
  15. //-->
  16. </head>
  17.  
  18. <div class="wrapper">
  19. <div class="header">
  20. </div>
  21. <div class="nav-wrapper">
  22. <div id="navigation">
  23. <div class="navbox-1">link 1 - link 2 - link 3</div>
  24. <div class="navbox-2">link 4 - link 5 - link 6</div>
  25. </div>
  26. </div>
  27. <div class="main">
  28. content<br />content<br />content<br />content<br />content<br />
  29. content<br />content<br />content<br />content<br />content<br />
  30. content<br />content<br />content<br />content<br />content<br />
  31. content<br />content<br />content<br />content<br />content<br />
  32. content<br />content<br />content<br />content<br />content<br />
  33. content<br />content<br />content<br />content<br />content<br />
  34. content<br />content<br />content<br />content<br />content<br />
  35. content<br />content<br />content<br />content<br />content<br />
  36. </div>
  37. </div>
  38. <script type="text/javascript">
  39. //<![CDATA[
  40. $(document).ready(function() {
  41. $(document).scroll(function(e) {
  42. if ($(document).scrollTop() > 100) {
  43. $('div#navigation').addClass('sticky');
  44. } else {
  45. $('div#navigation').removeClass('sticky');
  46. }
  47. });
  48. });
  49. //]]>
  50. </body>
  51. </html>
Download code! Download code (.txt)

 Stemmen
Niet ingelogd.

 Reacties
Post een reactie
Geen reacties (0)
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.021s