Yapışkan ( Sticky ) Menü Yapımı
16 Ağustos 2019 / 22:13
Burak
Merhaba 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.
Bu Yazılarıda Okuyabilirsiniz...
Bir yanıt yazın