Yazılım.
CevapSitesi.com Beta!
Çözüm Noktası
Facebook, Twitter, Google+ veya e-posta ile paylaşın.
| Sorular | Makaleler | Üyeler | Etiketler  | İletişim
Soru sormak ya da cevap vermek için;
giriş yapın veya üye olun.

Sosyal medya hesaplarınızla da giriş yapabilirsiniz.

Cevap Geçmişi

17.09.20 19:29
çıklamalarını daha sonra yazacağım. Bu örnek div'in yarısı göründüğünde ilgili tuşu vurgular. <html> <head> <meta charset="utf-8" /> <title>Test</title> <style> .sBaslik { position:fixed; left:0px; top:0px; height:30px; background:white; width:100%; } .sBaslik button { background-color:#fafafa; margin-right:3px; } .sBirDiv { margin:10px 0px 10px 0px; background:silver; min-height:700px; } </style> </head> <body> <div class='sBaslik'> <button id="btn_KTest1" class="sUstButton">Button 1</button> <button id="btn_KTest2" class="sUstButton">Button 2</button> <button id="btn_KTest3" class="sUstButton">Button 3</button> <button id="btn_KTest4" class="sUstButton">Button 4</button> </div> <div style="margin-top:30px"> <div id="dv_KTest1" class="sBirDiv"></div> <div id="dv_KTest2" class="sBirDiv"></div> <div id="dv_KTest3" class="sBirDiv"></div> <div id="dv_KTest4" class="sBirDiv"></div> </div> <script> function kontrol() { var dvs = document.querySelectorAll(".sBirDiv"); for (var i=0; i<dvs.length; i++) { var el = dvs[i]; var bcr = el.getBoundingClientRect(); if ((bcr.top <= window.innerHeight && bcr.bottom >= bcr.height / 2)) { Array.from(document.querySelectorAll(".sUstButton")).forEach(btn=>btn.style.removeProperty("background-color")); document.querySelector("#" + el.id.replace(/dv_K/, "btn_K")).style.backgroundColor = "#aaaaaa"; break; } } } function baslat() { document.addEventListener("scroll", kontrol); window.addEventListener("resize", kontrol); window.addEventListener("load", kontrol); window.addEventListener("orientationchange", kontrol); kontrol(); } document.addEventListener("DOMContentLoaded", baslat); </script> </body> https://codepen.io/CevapSitesi/pen/ZEWMxQp - Highlight an element when related div scrolls into view
Ekleyen: cevapsitesi
Değiştiren: cevapsitesi
Cevap olarak seçen: cevapsitesi
17.09.20 19:25
çıklamalarını daha sonra yazacağım. Bu örnek div'in yarısı göründüğünde ilgili tuşu vurgular. <html> <head> <meta charset="utf-8" /> <title>Test</title> <style> .sBaslik { position:fixed; left:0px; top:0px; height:30px; background:white; width:100%; } .sBaslik button { background-color:#fafafa; margin-right:3px; } .sBirDiv { margin:10px 0px 10px 0px; background:silver; min-height:700px; } </style> </head> <body> <div class='sBaslik'> <button id="btn_KTest1" class="sUstButton">Button 1</button> <button id="btn_KTest2" class="sUstButton">Button 2</button> <button id="btn_KTest3" class="sUstButton">Button 3</button> <button id="btn_KTest4" class="sUstButton">Button 4</button> </div> <div style="margin-top:30px"> <div id="dv_KTest1" class="sBirDiv"></div> <div id="dv_KTest2" class="sBirDiv"></div> <div id="dv_KTest3" class="sBirDiv"></div> <div id="dv_KTest4" class="sBirDiv"></div> </div> <script> function kontrol() { var dvs = document.querySelectorAll(".sBirDiv"); for (var i=0; i<dvs.length; i++) { var el = dvs[i]; var bcr = el.getBoundingClientRect(); if ((bcr.top <= window.innerHeight && bcr.bottom >= bcr.height / 2)) { Array.from(document.querySelectorAll(".sUstButton")).forEach(btn=>btn.style.removeProperty("background-color")); document.querySelector("#" + el.id.replace(/dv_K/, "btn_K")).style.backgroundColor = "#aaaaaa"; break; } } } function baslat() { document.addEventListener("scroll", kontrol); window.addEventListener("resize", kontrol); window.addEventListener("load", kontrol); window.addEventListener("orientationchange", kontrol); kontrol(); } document.addEventListener("DOMContentLoaded", baslat); </script> </body> https://codepen.io/CevapSitesi/pen/ZEWMxQp
Ekleyen: cevapsitesi
Değiştiren: cevapsitesi
Cevap olarak seçen: cevapsitesi
17.09.20 19:24
Açıklamalarını daha sonra yazacağım. Bu örnek div'in yarısı göründüğünde ilgili tuşu vurgular. <html> <head> <meta charset="utf-8" /> <title>Test</title> <style> .sBaslik { position:fixed; left:0px; top:0px; height:30px; background:white; width:100%; } .sBaslik button { background-color:#fafafa; margin-right:3px; } .sBirDiv { margin:10px 0px 10px 0px; background:silver; min-height:700px; } </style> </head> <body> <div class='sBaslik'> <button id="btn_KTest1" class="sUstButton">Button 1</button> <button id="btn_KTest2" class="sUstButton">Button 2</button> <button id="btn_KTest3" class="sUstButton">Button 3</button> <button id="btn_KTest4" class="sUstButton">Button 4</button> </div> <div style="margin-top:30px"> <div id="dv_KTest1" class="sBirDiv"></div> <div id="dv_KTest2" class="sBirDiv"></div> <div id="dv_KTest3" class="sBirDiv"></div> <div id="dv_KTest4" class="sBirDiv"></div> </div> <script> function kontrol() { var dvs = document.querySelectorAll(".sBirDiv"); for (var i=0; i<dvs.length; i++) { var el = dvs[i]; var bcr = el.getBoundingClientRect(); if ((bcr.top <= window.innerHeight && bcr.bottom >= bcr.height / 2)) { Array.from(document.querySelectorAll(".sUstButton")).forEach(btn=>btn.style.removeProperty("background-color")); document.querySelector("#" + el.id.replace(/dv_K/, "btn_K")).style.backgroundColor = "#aaaaaa"; break; } } } function baslat() { document.addEventListener("scroll", kontrol); window.addEventListener("resize", kontrol); window.addEventListener("load", kontrol); window.addEventListener("orientationchange", kontrol); kontrol(); } document.addEventListener("DOMContentLoaded", baslat); </script> </body> See the Pen Highlighting a key related to the div that goes into the frame while the page is scrolling, like lazy loading by Cevap Sitesi ( @CevapSitesi ) on CodePen . https://codepen.io/CevapSitesi/pen/ZEWMxQp
Ekleyen: cevapsitesi
Değiştiren: cevapsitesi
Cevap olarak seçen: cevapsitesi
17.09.20 19:23
Açıklamalarını daha sonra yazacağım. Bu örnek div'in yarısı göründüğünde ilgili tuşu vurgular. <html> <head> <meta charset="utf-8" /> <title>Test</title> <style> .sBaslik { position:fixed; left:0px; top:0px; height:30px; background:white; width:100%; } .sBaslik button { background-color:#fafafa; margin-right:3px; } .sBirDiv { margin:10px 0px 10px 0px; background:silver; min-height:700px; } </style> </head> <body> <div class='sBaslik'> <button id="btn_KTest1" class="sUstButton">Button 1</button> <button id="btn_KTest2" class="sUstButton">Button 2</button> <button id="btn_KTest3" class="sUstButton">Button 3</button> <button id="btn_KTest4" class="sUstButton">Button 4</button> </div> <div style="margin-top:30px"> <div id="dv_KTest1" class="sBirDiv"></div> <div id="dv_KTest2" class="sBirDiv"></div> <div id="dv_KTest3" class="sBirDiv"></div> <div id="dv_KTest4" class="sBirDiv"></div> </div> <script> function kontrol() { var dvs = document.querySelectorAll(".sBirDiv"); for (var i=0; i<dvs.length; i++) { var el = dvs[i]; var bcr = el.getBoundingClientRect(); if ((bcr.top <= window.innerHeight && bcr.bottom >= bcr.height / 2)) { Array.from(document.querySelectorAll(".sUstButton")).forEach(btn=>btn.style.removeProperty("background-color")); document.querySelector("#" + el.id.replace(/dv_K/, "btn_K")).style.backgroundColor = "#aaaaaa"; break; } } } function baslat() { document.addEventListener("scroll", kontrol); window.addEventListener("resize", kontrol); window.addEventListener("load", kontrol); window.addEventListener("orientationchange", kontrol); kontrol(); } document.addEventListener("DOMContentLoaded", baslat); </script> </body> https://codepen.io/CevapSitesi/pen/ZEWMxQp
Ekleyen: cevapsitesi
Değiştiren: cevapsitesi
Cevap olarak seçen: cevapsitesi

En fazla 3 eski durum gösterilir.