Question

153

Run script when div is visible in browser window

rated 0 times [ 160] [ 7] / answers: 1 / hits: 27660 / 12 Years ago, fri, september 7, 2012, 12:00:00

I need to run some JavaScript when a div is visible in the browser window, for example, when it is scrolled to, even repeatedly. How would I go about doing so?

Basic structure:

<div class='page1'></div>



<div class='page2'></div>



<div class='page3'></div>



<div class='page4'></div>

CSS:

div {

    float: left;

    height: 500px;

    width: 500px;

    margin: 50px 0;

    background: grey;

}

Fiddle: http://jsfiddle.net/Q5BUe/1/

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

debras

Add To Favorites

Follow

Total Points: 307

Total Questions: 98

Total Answers: 112

Location: Maldives

Member since Tue, Dec 21, 2021

3 Years ago

debras questions

1 MessageEmbed: Cannot read property 'client' of undefined

Wed, Jun 3, 20, 00:00, 4 Years ago

1 How to change text and color of a column value inside a < v-data-table> based on a condition with Vue.js 2.6.11 and Viutify 2.2.11

Sun, May 3, 20, 00:00, 4 Years ago

1 Nested table with data tables

Mon, Mar 30, 20, 00:00, 4 Years ago

1 How to access state when component unmount with React Hooks?

Fri, Feb 28, 20, 00:00, 4 Years ago

1 How to get current user to display profile page in React app?

Tue, Feb 11, 20, 00:00, 4 Years ago

View All

answered 12 Years ago kiyam · Accepted Answer

As with the other provided question/solution, here is the full implementation...

Upon loading, we run the function to assign the visible divs with the corresponding color. On jQuery scroll handler, we continue to call the function to assign the new background color.

http://jsfiddle.net/Q5BUe/5/

$(allInView);

$(window).scroll(allInView);





function isScrolledIntoView(elem) {

    var docViewTop = $(window).scrollTop();

    var docViewBottom = docViewTop + $(window).height();



    var elemTop = $(elem).offset().top;

    var elemBottom = elemTop + $(elem).height();



    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));

}



function allInView() {



    if (isScrolledIntoView($(.page1))) $(.page1).css(backgroundColor, red);

    else $(.page1).css(backgroundColor, grey);



    if (isScrolledIntoView($(.page2))) $(.page2).css(backgroundColor, green);

    else $(.page2).css(backgroundColor, #333);



    if (isScrolledIntoView($(.page3))) $(.page3).css(backgroundColor, yellow);

    else $(.page3).css(backgroundColor, #222);



    if (isScrolledIntoView($(.page4))) $(.page4).css(backgroundColor, blue);

    else $(.page4).css(backgroundColor, #111);



}