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 ?
Dan pak hij toch de bovenkant van het element/div, ik moet de onderkant hebben :)
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)
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.
<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>
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 :)
