javascript - 当另一个元素滚动到时尝试将 addClass 添加到一个元素

转载作者：行者123 更新时间：2023-11-29 15:34:33

问题

尝试制作一个宠物列表，所以当您向下滚动到右栏中的某个宠物时 <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/

文章推荐：对象上的javascript递归永远不会结束

文章推荐： javascript - 在 IE11 中使用数据 URL 打开 pdf.js

文章推荐： javascript - 在 JS 中拆分字符串

java - Heroku 进程应该始终保持运行状态，但是当它被 ping 到时，它会崩溃并出现 H20 错误
所以我有一个在 Heroku 中运行的 Java 应用程序，它总是在监听某些内容。它不应该被 ping 到，但如果被 ping 到，它会返回一个 H20 错误，因为该过程永远不会结束。我怎样才能防止这

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 当另一个元素滚动到时尝试将 addClass 添加到一个元素

问题

JSFiddle:http://jsfiddle.net/oe9pqk8w/1/

脚本.js

index.html