offset() bottom
Enige tijd probeer ik met jquery de onderkant van een element te regsteren voor een functie.
Ik zie dat het tegenovergestelde van .offset().top niet werkt '.offset().bottom'
Is er een andere manier of tooltje waarmee dit wel kan ?
Gr. Bryan
Waarom k dit vraag is: Het element/div is de ene keer 100px en de andere keer bijvoorbeeld 900px.
Om het moment dat een gebruiker scrollt en de onderkant is bereikt moet jquery een functie uitvoeren.
(Het gaat niet om het document maar om een losse div)
Wat probeer je uiteindelijk te bereiken?
EDIT: hetzelfde principe zou je verder kunnen toepassen?
.offset = relatieve positie van element
Als scrollTop + windowHeight voorbij offset + hoogte div is heb je de onderkant van die div bereikt?
---
windowHeight = hoogte van browser viewport
documentHeight = hoogte van HTML document
Je hebt de bodem bereikt als:
windowHeight + scrollTop == documentHeight
Voorbeeld:
Code (php)
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
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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<style type="text/css">
body { position: relative; }
div#info { position: fixed; bottom: 0; right: 0; display: block; height: 50px; width: 200px; border: 1px solid #ff0000; }
</style>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="info"></div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$(window).scroll(function() {
var windowHeight = $(window).height();
var documentHeight = $(document).height();
var scrollTop = $(window).scrollTop();
$('#info').html('scrolling '+(windowHeight+scrollTop)+'/'+documentHeight);
if (windowHeight + scrollTop == documentHeight) {
alert('WAFFLES');
}
})
});
//]]>
</script>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<style type="text/css">
body { position: relative; }
div#info { position: fixed; bottom: 0; right: 0; display: block; height: 50px; width: 200px; border: 1px solid #ff0000; }
</style>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div id="info"></div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
$(window).scroll(function() {
var windowHeight = $(window).height();
var documentHeight = $(document).height();
var scrollTop = $(window).scrollTop();
$('#info').html('scrolling '+(windowHeight+scrollTop)+'/'+documentHeight);
if (windowHeight + scrollTop == documentHeight) {
alert('WAFFLES');
}
})
});
//]]>
</script>
</body>
</html>
Ik las ergens dat het vermelden van de <!DOCTYPE> belangrijk is, anders gaan berekeningen mis.
Gewijzigd op 02/06/2015 22:58:24 door Thomas van den Heuvel
Ik heb even een fiddle aangemaakt om het wat duidelijker uit te leggen.
Fiddle
De gele div (content) is hier 1500px, deze kan veranderen qua hoogte.(ligt eraan hoeveel inhoud)
Als je gaat scrollen dan komt er een moment dat de div content ophoud.
Wat ik wil is dat jquery iets uitvoerd als je bent het scrollen en bij de bodem komt van deze div.
Jquery moet dan bijvoorbeeld de class fixed verwijderen.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<script type="text/javascript">
//Als het document klaar is
$(document).ready(function(){
//Als het document gescrolled word
$(document).scroll(function(){
//Refferentie naar je content element
var content = $(".content");
//Offsets opvragen van je content element
var contentOffset = content.offset();
//Uitrekenen wat je target is. Dit is je offset top + je height
//Je wil namelijk de onderkant van je element
var target = contentOffset.top + $(content).height()
//Scrolltop geeft je de X van de bovenkant van je pagina
//Je wil de funtie uitvoeren als de onderkant in beeld is, je window hoogte moet er bij
//Zodra hij bij de target is doe iets
if(($(document).scrollTop() + $(window).height()) >= target) {
//Wat je wil doen als je bij de target bent
console.log("bottom of the div")
}
})
})
</script>
//Als het document klaar is
$(document).ready(function(){
//Als het document gescrolled word
$(document).scroll(function(){
//Refferentie naar je content element
var content = $(".content");
//Offsets opvragen van je content element
var contentOffset = content.offset();
//Uitrekenen wat je target is. Dit is je offset top + je height
//Je wil namelijk de onderkant van je element
var target = contentOffset.top + $(content).height()
//Scrolltop geeft je de X van de bovenkant van je pagina
//Je wil de funtie uitvoeren als de onderkant in beeld is, je window hoogte moet er bij
//Zodra hij bij de target is doe iets
if(($(document).scrollTop() + $(window).height()) >= target) {
//Wat je wil doen als je bij de target bent
console.log("bottom of the div")
}
})
})
</script>
Even snel voor je in elkaar gezet (met behulp van jQuery)
Volgens mij zou dit aardig moeten doen wat jij wil. Mocht er nog iets onduidelijk zijn nadat je de comments heb gelezen, vraag het dan gewoon :)
Jacco
Quote:
Als scrollTop + windowHeight voorbij offset + hoogte div is heb je de onderkant van die div bereikt?
Zal getest moeten worden maar het wordt al waarschijnlijker dat dit werkt :].
Dit is inderdaad wat ik bedoel. Bedankt voor de uitgebreide uitleg Jacco en Thomas!