Yapışkan ( Sticky ) Menü Yapımı
SanalData’yı Google’da tercih edilen kaynak olarak ekleyinMerhaba arkadaşlar,
Kimi zaman web sitelerinden header menüsünü yapışkan yani aşağı scroll ile kayan yapmak isteriz.İşte böyle durumlarda aşağıdaki kodları kullanarak kolaylıkla yapabilirsiniz.
Css
|
1 2 3 4 5 6 7 |
.sticky { position: fixed; top: 0; width: 100%; z-index: 99; } .header_menu{} |
Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> window.onscroll = function () { myFunction() }; var navbar = document.getElementById("header"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset > sticky) { navbar.classList.add("sticky"); } else { navbar.classList.remove("sticky"); } } </script> |
Örnek html kodlaması aşağıdaki gibidir;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<html> <head> <style> .sticky { position: fixed; top: 0; width: 100%; z-index: 99; } .header_menu{} </style> </head> <body> <div id='header' class='header_menu'> header menu </div> <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> <script> window.onscroll = function () { myFunction() }; var navbar = document.getElementById("header"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset > sticky) { navbar.classList.add("sticky"); } else { navbar.classList.remove("sticky"); } } </script> </body> </html> |
Hepsi bu kadar 🙂 Takıldığınız yerleri yorum olarak yazabilirsiniz. Bir sonraki yazılım konusunda görüşünceye kadar bol sorgulu ve hatasız kodlamalar dilerim.
Günün zaman çizelgesi
Haber eklenme saatine göre sıralanır.
- Bugün
- Telefon Çekmiyorsa Deneyebileceğiniz Çözümler
- IPTV Nedir? Yasal Yayınlarla Kaçak Servis Arasındaki Fark
- Windows 11 Çalıştır penceresi yenileniyor: Gözat yok
- Apple TV 4K’da 8 GB RAM var, uygulama sınırı 2 GB
- Gemini Docs ve Sheets dosyalarını sohbet içinde düzenliyor
- The Witcher 4 için 2028 çıkış iddiası yeniden gündemde
- Dün
- Akıllı gözlükler mahkeme, okul ve havuzlarda yasaklanıyor
- Expert RAW, Galaxy S27 ile 30 kare DNG çekebilecek
- Fuelio, Android Auto’da yakıt fiyatlarını karşılaştırıyor
- COMAC’ın elektrikli uçağı CE-25A mürettebatla uçtu
- Cloudflare, yapay zekâ ajanları için Kitesurf’ü açtı
- BMW M 1000 RS tanıtıldı: 215 beygir, 196 kg
- GTA 6’nın hikâyesi 50 saat, platin kupası 200 saat sürebilir
- SİPER Ürün-2’nin menzili 150 kilometreyi aşıyor