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.
0

Bir etiket görünen alana girdiğinde ilgili başka bir etiketi vurgulama

Merhaba arkadaşlar,

Sayfamda sıralı şekilde divler var ve divlerin id leri var.

Ekranı aşağı doğru kaydırırken başka bir id li dive geçtiysem navbarda o idye bağlı butonun rengininin değişmesini istiyorum.

Nasıl yapabilirim?

1 Cevap

0
çı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>




Cevaplayan: 16.09.20 13:00
cevapsitesi
101,974p 15ü
Cevabı seçen: 16.09.20 17:49
cevapsitesi   101,974p 15ü