CODEWITHSUNDEEP
javascriptjquery
Liron Harel
Liron Harel

Reputation: 11247

Get the element closer to the middle of the screen in jQuery

I have a list of item divs in the page.

example:

<div data-page='1' class'item' ></div>
<div data-page='1' class'item' ></div>
<div data-page='1' class'item' ></div>
<div data-page='2' class'item' ></div>
<div data-page='2' class'item' ></div>
<div data-page='2' class'item' ></div>
<div data-page='3' class'item' ></div>
<div data-page='3' class'item' ></div>
<div data-page='3' class'item' ></div>

I need to find out the element that is in the most center part of the screen and get its data-page number.

If all the div are close to the button of the page or not visible because its down the page, I get the top most one because it's closer to the middle, and if all the div are above the middle or not visible because they are at the upper part of the window outside the visible view, I get the bottom most div because it's closer to the middle.

What I've tried (source):

$(".item").sort(function(a,b){
      return Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(a).height()/2) / $(a).position().top)) - 
             Math.abs(1 - (($(window).scrollTop()+$(window).height()/2-$(b).height()/2) / $(b).position().top))
    })[0].css("background", "red");

The above function didn't work for me, because it highlighted in red a bottom most element.

How can I do that in jQuery and also continuously report the closest one as I vertically scroll the page.

Upvotes: 5

Views: 4893

Answers (3)

Anadar
Anadar

Reputation: 41

In case anyone else runs into this sometime later, building on @[Idan Schechter][1]'s response, I thought I would show the change that he found. (Full credit to him). I couldn't comment so am adding as a complete answer here:

    $(function(){
    $(window).scroll(function(){        
        // get the scroll position of the document + half the window height
        var scrollTop = $(document).scrollTop() + ($(window).height() / 2);
        var positions = [];

        // push each of the items we want to check against to an array with their position and selector
        $('.item').each(function(){
            $(this).removeClass("active");
            positions.push({position:$(this).offset().top, element: $(this)});
        });

        var getClosest = closest(positions,scrollTop);
        getClosest.addClass("active"); // the element closest to the middle of the screen
        console.log( getClosest.attr("data-page") );
    });

    // finds the nearest position (from an array of objects) to the specified number
    function closest(array, number) {
        var num = 0;
        for (var i = array.length - 1; i >= 0; i--) {
            if(Math.abs(number - array[i].position) < Math.abs(number - array[num].position)){
                num = i;
            }
        }
        return array[num].element;
    }
});

The big change is to change the position in the main function to offset. That was what helped the function do what I needed.

Upvotes: 0

eltonkamami
eltonkamami

Reputation: 5190

you can use document.elementFromPoint giving it the x and y coordinates of the middle of the screen

document.addEventListener("scroll", function(){
  let x = window.innerWidth / 2;
  let y = window.innerHeight / 2;
  let element = document.elementFromPoint(x, y);
  let page = element.getAttribute("data-page");
  document.querySelector(".middle") &&   document.querySelector(".middle").classList.remove("middle");
  element.classList.add("middle"); 
})

read more about document.elementFromPoint

here is a Codepen example

Upvotes: 1

Brett Gregson
Brett Gregson

Reputation: 5913

On the scroll event, you can get the middle of the sreen and then loop the elements you want to check and get each of their positions and find which is closest to the middle of the screen

 $(function(){
    $(window).scroll(function(){        
        // get the scroll position of the document + half the window height
        var scrollTop = $(document).scrollTop() + ($(window).height() / 2);
        var positions = [];

        // push each of the items we want to check against to an array with their position and selector
        $('.item').each(function(){
            $(this).removeClass("active");
            positions.push({position:$(this).position().top, element: $(this)});
        });

        var getClosest = closest(positions,scrollTop);
        getClosest.addClass("active"); // the element closest to the middle of the screen
        console.log( getClosest.attr("data-page") );
    });

    // finds the nearest position (from an array of objects) to the specified number
    function closest(array, number) {
        var num = 0;
        for (var i = array.length - 1; i >= 0; i--) {
            if(Math.abs(number - array[i].position) < Math.abs(number - array[num].position)){
                num = i;
            }
        }
        return array[num].element;
    }        
});

Here is a working example

Upvotes: 5

Related Questions