Function scrollIntoView doesn't work
Question
I have a little problem with my function scrollIntoView . Indeed, it doesn't work :(
This is my code:
HTML
<section class="page_mission"> <div class="page_mission_text"> <div class="scroll-animations"> <div class="animated fadeInLeft"> <h2>Design <i class="fab fa-css3-alt"></i><i class="fab fa-html5"></i></h2> <p>Blablabla<br></p> </div><hr style="width: 75%;"> <div class="animated"> <h2>Modernité <i class="fas fa-dna"></i></h2> <p>Blablabla</p> </div><hr style="width: 75%;"> <div class="animated"> <h2>Coûts <a href="cost_popup.html" class="ajax-popup-link"><i class="far fa-credit-card"></i></a></h2> <p>Blablabla</p> </div> </div> </div> </section>JS
$(document).ready(function() { 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)); } $(window).scroll(function() { $('.scroll-animations .animated').each(function() { if (isScrolledIntoView(this) === true) { $(this).addClass('fadeInLeft'); } }); });
Does someone have an idea what's wrong? Thanks a lot!
1 answers
solution1
0 ACCPTED 2018-05-25 18:53:46
It appears to me the fadeInLeft class is being added on scroll as expected. You do, however, need an additional closing curly brace and closing parentheses to close your document ready event handler:
$(document).ready(function() {
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));
}
$(window).scroll(function() {
$('.scroll-animations .animated').each(function() {
if (isScrolledIntoView(this) === true) {
$(this).addClass('fadeInLeft');
}
});
});
}); // This was missing
You also need to make sure to load jQuery before your JavaScript executes. The easiest way is to place something like this in the page's <head> element:
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
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.