This function detects whether the content enters the screen or not. I’m trying to return true or false depending on these conditions. but it returns undefined value. Since I will use this function in high order later, I need to output true or false.
function poser(x) {
$(document).scroll(function(){
let wHeight = $(window).height();
let cHeight = $(x).outerHeight();
let scroll = $(window).scrollTop();
let contentPos = $(x).position();
let contentTop = contentPos.top;
let inScreen = (parseInt(scroll) + parseInt(wHeight)) /* - wHeight / 2 */ >= parseInt(contentTop);
let outScreen = parseInt(contentTop) + parseInt(cHeight) <= scroll;
if (inScreen && !outScreen) {
return true
}
if (inScreen && outScreen) {
return false
}
})
}
console.log(poser(".sectionOne"))
body {
height:3000px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="sectionOne">
test
</div>
2
Answers
You should be able to get the element and then from there the code is pretty simple
Then use a button and call the function
elementInViewport()
https://codepen.io/andreaswik/pen/dxVMvj
I hope this will help you it doesn’t return true or false but you can add a callback function that runs your code if the content is intersecting or not.