Bu örnek, kullanıcı sayfayı kaydırmaya başladığında gezinti çubuğunu nasıl daraltacağını gösterir.
Efekti görmek için aşağıdaki kodları bir HTML belgesi olarak kaydedip çalıştırın.
Ekran Görüntüsü:
HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * {box-sizing: border-box;} body { margin: 0; font-family: Arial, Helvetica, sans-serif; } #navigasyon { overflow: hidden; background-color: #f1f1f1; padding: 90px 10px; transition: 0.4s; position: fixed; width: 100%; top: 0; z-index: 99; } #navigasyon a { float: left; color: black; text-align: center; padding: 12px; text-decoration: none; font-size: 18px; line-height: 25px; border-radius: 4px; } #navigasyon #logo { font-size: 35px; font-weight: bold; transition: 0.4s; } #navigasyon a:hover { background-color: #ddd; color: black; } #navigasyon a.active { background-color: dodgerblue; color: white; } #navbar-right { float: right; } @media screen and (max-width: 580px) { #navigasyon { padding: 20px 10px !important; } #navigasyon a { float: none; display: block; text-align: left; } #nav-sag{ float: none; } } </style> </head> <body> <div id="navigasyon"> <a href="#" id="logo">TASARIM KODLAMA</a> <div id="nav-sag"> <a class="active" href="#">AnaSayfa</a> <a href="#">İletişim</a> <a href="#">Hakkımızda</a> </div> </div> <div style="margin-top:210px;padding:15px 15px 2500px;font-size:30px"> <p><b>Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. </b></p> <p>Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. </p> <p>Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır.</p> <p>1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p> </div> <script> window.onscroll = function() {scrollFunction()}; function scrollFunction() { if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) { document.getElementById("navigasyon").style.padding = "30px 10px"; document.getElementById("logo").style.fontSize = "25px"; } else { document.getElementById("navigasyon").style.padding = "80px 10px"; document.getElementById("logo").style.fontSize = "35px"; } } </script> </body> </html> |
Kaynak:
www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_shrink_scroll
Yorum Yap