Başlangıçta, elemanın .offset konumunu tutun ve pencereye göre göreceli konumunu hesaplayın
Bakınız :
1. ofset
2. kaydırma
3. scrollTop
Bu kemanda deneyebilirsiniz
Aşağıdaki birkaç satır kod, bunun nasıl çözülebileceğini açıklar
zaman .scroll olay gerçekleştirilir, pencereyi nesneye göre elemanının görece konumunu hesaplamak
$(window).scroll(function () {
console.log(eTop - $(window).scrollTop());
});
tarayıcıda kaydırma yapıldığında yukarıdaki olay işleyici işlevini çağırıyoruz
kod pasajı
function log(txt) {
$("#log").html("location : <b>" + txt + "</b> px")
}
$(function() {
var eTop = $('#element').offset().top; //get the offset top of the element
log(eTop - $(window).scrollTop()); //position of the ele w.r.t window
$(window).scroll(function() { //when window is scrolled
log(eTop - $(window).scrollTop());
});
});
#element {
margin: 140px;
text-align: center;
padding: 5px;
width: 200px;
height: 200px;
border: 1px solid #0099f9;
border-radius: 3px;
background: #444;
color: #0099d9;
opacity: 0.6;
}
#log {
position: fixed;
top: 40px;
left: 40px;
color: #333;
}
#scroll {
position: fixed;
bottom: 10px;
right: 10px;
border: 1px solid #000;
border-radius: 2px;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>
<div id="element">Hello
<hr>World</div>
<div id="scroll">Scroll Down</div>