问题

Question

问题

尝试制作宠物列表，这样当您向右向下滚动到<main>中的某个宠物并点击<p class="nameTitle">时，默认类active会被移除然后添加使用相同的宠物名称在左栏中的箭头上。

我该怎么做？

我的理解是，我需要使用.scrollTop()来查找当前的垂直位置。我console.log(scroll)但我担心的是，单个宠物的信息可能会发生变化，因此，<main>

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

scripts.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>

Answer 1

您需要将滚动功能更改为以下内容：

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 ...

Answer 2

更简单的解决方案

// this will get the heights of each div. For example: [15, 542.5, 1069.5, 1596.5, 2123.5, 2650.5, 3177.5]
var $pets = $('.pet').map(function(_, i) { return $(i).offset().top; }); 

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  // filter through the $pets array to find the number of div's that have been crossed based on the height 
  // lets say the scroll is 1268
  // index will be 3 and hence the third one will be highlighted
  var index = $pets.filter(function(i, v) { if (v < scroll) return i; }).length;
  $(".nameNav").removeClass("active");
  $(".nameNav").eq(index).addClass("active") // this will get the third element
});

这是一个演示 http://jsfiddle.net/dhirajbodicherla/oe9pqk8w/7/

当另一个元素滚动到

问题

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

scripts.js中

的index.html

2 个答案: