Yapışkan ( Sticky ) Menü Yapımı
Burak
16 Ağustos 2019 / 22:13
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.
Javascript İle Sekme Değiştiğinde Title Değiştirme
Burak
1 Ağustos 2019 / 18:10
Merhaba arkadaşlar, Son dönemlerde moda olan sekme değiştiğinde title değiştirme olayını aşağıdaki küçük kod parçacıgı ile sizlerde rahatlıkla yapabilirsiniz.
1 2 3 4 5 6 | <script type="text/javascript"> var title = document.title; var alttitle = "Bizi Unutma! :)"; window.onblur = function () { document.title = alttitle; }; window.onfocus = function () { document.title = title; }; </script> |
Bir sonraki yazıda görüşünceye kadar hepiniz bol kodlu günler…
Javascript ile Div Sıralama – Javascript Div Order by
Burak
2 Nisan 2019 / 16:03
Merhabalar, Javascript ile div sıralamak için aşağıdaki örnek kodları kullanabilirsiniz.
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 | <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title></title> </head> <body> <div id="list"> <div id="4">test 4 dd</div> <div id="3">tesdf 3 dd</div> <div id="5">test 5 f</div> <div id="1">test 1 s</div> <div id="2">test 2 f</div> </div> <script type="text/javascript"> var toSort = document.getElementById('list').children; toSort = Array.prototype.slice.call(toSort, 0); toSort.sort(function(a, b) { var aord = +a.id; var bord = +b.id; return (aord > bord) ? 1 : -1; }); var parent = document.getElementById('list'); parent.innerHTML = ""; for(var i = 0, l = toSort.length; i < l; i++) { parent.appendChild(toSort[i]); } </script> </body> </html> |