CODEWITHSUNDEEP
javascripthtml
Peter Kuhlmann
Peter Kuhlmann

Reputation: 9

Load Javascript when div is in viewport

Thats the Div in HTML file

<div class="inViewport">

And this script should be loading only when the div is in viewport

    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function () {
            ToxProgress.create();
            ToxProgress.animate();
        });
    </script>

Upvotes: 0

Views: 2056

Answers (2)

TheEagle
TheEagle

Reputation: 5992

I think this function will help you:

function isInViewport(el) {
    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

(taken from here) Then, you need to listen to the scroll event, and every time the user scrolls, you check if the element is in the viewport by calling above function. Sample:

window.addEventListener("scroll resize", function() {
    if (isInViewport(document.getById("inViewport"))) {
       ToxProgress.create();
       ToxProgress.animate();
    }
});

Upvotes: 0

Matteo Dal Grande
Matteo Dal Grande

Reputation: 120

This is what you should look at: Check if element is visible after scrolling

Here is an example for you that demonstrates this technique: http://jsfiddle.net/XYS2G/ - just try to scroll the Result window.

HTML:

<div class="indicators">
    <span class="indicator" data-id="section1">section1</span>
    <span class="indicator" data-id="section2">section2</span>
    <span class="indicator" data-id="section3">section3</span>
    <span class="indicator" data-id="section4">section4</span>
    <span class="indicator" data-id="section5">section5</span>
    <span class="indicator" data-id="section6">section6</span>
</div>
<div class="sections">
    <div class="section" id="section1">section1</div>
    <div class="section" id="section2">section2</div>
    <div class="section" id="section3">section3</div>
    <div class="section" id="section4">section4</div>
    <div class="section" id="section5">section5</div>
    <div class="section" id="section6">section6</div>
</div>

CSS:

.indicators { position: fixed; }
.section { height: 150px; }

Javascript:

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 refreshIndicators() {
    $('.indicator').each(function () {
        if (isScrolledIntoView($('#' + $(this).attr('data-id')))) {
            $(this).css('color', 'red');
        } else {
            $(this).css('color', 'black');
        }
    });
}

refreshIndicators();

$(window).bind('scroll', refreshIndicators);

Upvotes: 4

Related Questions