函数滚动到视图不起作用

我的函数scrollIntoView有点问题。事实上，它不起作用:(

这是我的代码：

.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');
}
});
});

有人知道出了什么问题吗？多谢！

在我看来，fadeInLeft类正在按预期添加到滚动中。但是，您确实需要一个额外的右大括号和右括号来关闭文档就绪事件处理程序：

$(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

JSFiddle

你还需要确保在 JavaScript 执行之前加载 jQuery。最简单的方法是在页面的<head>元素中放置这样的东西：

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

相关内容

最新更新

热门标签：