skip to Main Content

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


  1. You should be able to get the element and then from there the code is pretty simple

    var myElement = document.getElementById('my-element');
    
    function elementInViewport() {
    
        var bounding = myElement.getBoundingClientRect();
    
        if (bounding.top >= 0 
            && bounding.left >= 0 
            && bounding.right <= (window.innerWidth || document.documentElement.clientWidth) 
            && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight)) {
    
            alert('Element is in the viewport!');
        } else {
    
            alert('Element is NOT in the viewport!');
        }
    }
    

    Then use a button and call the function elementInViewport()

    <button onclick='elementInViewPort()'>Check If Element In View</button>
    

    https://codepen.io/andreaswik/pen/dxVMvj

    Login or Signup to reply.
  2. 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.

    // This is your observer that checks if your element is in or out of your viewport
    function poser(elem, myCallback) {
    let observer = new IntersectionObserver(
    entries => {
    entries.forEach(entry => {
    // this is where your callback function runs and receives the true or false
    entry.isIntersecting ? myCallback(entry.isIntersecting): myCallback(entry.isIntersecting);
    });
    },
    {
    root: null,
    rootMargin: "0% 0% 0% 0%",
    threshold: 1,
    }
    );
    observer.observe(elem);
    }
    // In this callback function you right the code you want to execute if the element is intersection or not
    function myCallback(state) {
    state ? console.log("i intersect") : console.log("now i don't");
    }
    poser(document.querySelector("Your selector"), myCallback);
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search