问题
尝试制作一个宠物列表，所以当您向下滚动到右栏中的某个宠物时 <main>并点击<p class="nameTitle"> active 的默认类被删除，然后添加到具有相同宠物名称的左列中的箭头上。
我该怎么做？
我的理解是我需要使用 .scrollTop()找到当前的垂直位置。我是 console.log(scroll)但我担心的是单个宠物的信息可能会改变大小，因此会改变宠物名称在屏幕下方的距离 <main>
JSFiddle:http://jsfiddle.net/oe9pqk8w/1/
脚本.js
$(function(){
$(".nameNav").click(function(){
$(".nameNav").removeClass("active")
$(this).toggleClass("active");
});
$(window).scroll(function(){
var scroll = $(window).scrollTop();
});
});
index.html
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8">
<title>Name of Website</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<!-- <link rel="icon" type="image/png" href="assets/img/favicon.ico"> -->
</head>
<body>
<nav class="vertical">
<div class="rectangle">
<a href="#max"><p class="nameNav active">Max</p></a>
<a href="#rocky"><p class="nameNav">Rocky</p></a>
<a href="#lucky"><p class="nameNav">Lucky</p></a>
<a href="#buddy"><p class="nameNav">Buddy</p></a>
<a href="#charlie"><p class="nameNav">Charlie</p></a>
<a href="#jack"><p class="nameNav">Jack</p></a>
<a href="#teddy"><p class="nameNav">Teddy</p></a>
</div><!-- /.rectangle -->
</nav>
<main>
<div class="pet">
<p class="nameTitle" id="max">Max</p>
<img src="http://placehold.it/325x325" alt="">
<p class="breed">Golden Retriver</p>
<p class="description">"Squirrel!"</p>
<p class="cost">$300</p>
<hr>
</div><!-- /.pet -->
<div class="pet">
<p class="nameTitle" id="rocky">Rocky</p>
<img src="http://placehold.it/325x325" alt="">
<p class="breed">Golden Retriver</p>
<p class="description">"Squirrel!"</p>
<p class="cost">$300</p>
<hr>
</div><!-- /.pet -->
<div class="pet">
<p class="nameTitle" id="lucky">Lucky</p>
<img src="http://placehold.it/325x325" alt="">
<p class="breed">Golden Retriver</p>
<p class="description">"Squirrel!"</p>
<p class="cost">$300</p>
<hr>
</div><!-- /.pet -->
<div class="pet">
<p class="nameTitle" id="buddy">Buddy</p>
<img src="http://placehold.it/325x325" alt="">
<p class="breed">Golden Retriver</p>
<p class="description">"Squirrel!"</p>
<p class="cost">$300</p>
<hr>
</div><!-- /.pet -->
<div class="pet">
<p class="nameTitle" id="charlie">Charlie</p>
<img src="http://placehold.it/325x325" alt="">
<p class="breed">Golden Retriver</p>
<p class="description">"Squirrel!"</p>
<p class="cost">$300</p>
<hr>
</div><!-- /.pet -->
<div class="pet">
<p class="nameTitle" id="jack">Jack</p>
<img src="http://placehold.it/325x325" alt="">
<p class="breed">Golden Retriver</p>
<p class="description">"Squirrel!"</p>
<p class="cost">$300</p>
<hr>
</div><!-- /.pet -->
<div class="pet">
<p class="nameTitle" id="teddy">Teddy</p>
<img src="http://placehold.it/325x325" alt="">
<p class="breed">Golden Retriver</p>
<p class="description">"Squirrel!"</p>
<p class="cost">$300</p>
<hr>
</div><!-- /.pet -->
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/scripts.js"></script>
</body>
</html>
最佳答案
您需要将滚动功能更改为以下:
var cur_selected = 0; //this var is just for optimization
$(window).scroll(function(){
var scroll_bar = $(this);
$(".pet").each(function(index){
//for each .pet check whether the scroll_bar is inside particular div
if(scroll_bar.scrollTop() >= $(this).offset().top
&& scroll_bar.scrollTop() <= ($(this).offset().top + $(this).height())){
if(cur_selected != index){
$(".rectangle").find(".active").removeClass("active");
$(".rectangle a:eq("+index+") p").addClass("active");
cur_selected = index;
}
}
});
});
看看这个 jsFiddle ...
关于javascript - 当另一个元素滚动到时尝试将 addClass 添加到一个元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30881587/