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>
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);
Hello and thanks for the quick response. But I want to run the script when the div comes to viewport because there is an animation skill circle.
Thats my div with skill bar cirlce inlcuded
<div id="inViewport">
Thats the new script
<script type="text/javascript">
if (document.getElementById("inViewport")){
ToxProgress.create();
ToxProgress.animate();
}
</script>
Like this: But not working... sorry I am a noob
<script type="text/javascript">
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)
);
window.addEventListener("scroll resize", function() {
if (isInViewport(document.getById("inViewport"))) {
ToxProgress.create();
ToxProgress.animate();
}
});
</script>
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();
}
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.