Cevap Geçmişi
«« Soruya geri dön
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.
