时间戳

首页 > 解决方案 > 在滚动时获取多个 div 的数据 ID

javascript - 在滚动时获取多个 div 的数据 ID

问题描述

问题

我有一系列 div，每个都有自己的data-id，当用户滚动到该 div 时，我试图获取该 id。目前，该行为仅适用于该系列中的第一个，但不适用于所有十个。

客观的

密码笔

https://codepen.io/onlyandrewn/pen/jpmjaE?editors=1010

脚本.js

$(function(){

  $(window).scroll(function(){
    getGroupID();
  });

  function getGroupID() {

    var scrollPosition = $(window).scrollTop();

    var group = $(".photo__group");
    var groupID = group.attr("data-id");
    var groupBottom = group.offset().top + group.outerHeight();

    // If a user scrolls down the page and their scroll position is greater than the bottom of the photo group, update the corresponding progress dots. 
    if (scrollPosition > groupBottom) {
        updateProgressDots(groupID);
    } else {
      updateProgressDots(0);
    }
  }

  // This function removes the `is-active` class from all `dot__border` elements, takes the groups `data-id` and adds a `is-active` class to that element in the series i.e. If the user is on the first group, then the first dot / dot border should have the `is-active` class.
  function updateProgressDots(groupID) {

    var dotBorder = $(".dot__border");
    dotBorder.removeClass("is-active");
    dotBorder.eq(groupID).addClass("is-active");    
  }
});

索引.html

<div class="dots">
  <div class="dot__border is-active">
    <div class="dot"></div>
  </div>

  <div class="dot__border">
    <div class="dot"></div>
  </div>

  <div class="dot__border">
    <div class="dot"></div>
  </div>

  <div class="dot__border">
    <div class="dot"></div>
  </div>

  <div class="dot__border">
    <div class="dot"></div>
  </div>

  <div class="dot__border">
    <div class="dot"></div>
  </div>

  <div class="dot__border">
    <div class="dot"></div>
  </div>

  <div class="dot__border">
    <div class="dot"></div>
  </div>

  <div class="dot__border">
    <div class="dot"></div>
  </div>

  <div class="dot__border">
    <div class="dot"></div>
  </div>
</div>

<div class="photo__group" data-id="1">Photo group #1</div>
<div class="photo__group" data-id="2">Photo group #2</div>
<div class="photo__group" data-id="3">Photo group #3</div>
<div class="photo__group" data-id="4">Photo group #4</div>
<div class="photo__group" data-id="5">Photo group #5</div>
<div class="photo__group" data-id="6">Photo group #6</div>
<div class="photo__group" data-id="7">Photo group #7</div>
<div class="photo__group" data-id="8">Photo group #8</div>
<div class="photo__group" data-id="9">Photo group #9</div>
<div class="photo__group" data-id="10">Photo group #10</div>

标签： javascriptjqueryforeachscroll

解决方案

您必须使用 jQuery.each来遍历所有匹配的元素。这是您的工作代码。

$(function(){
  updateProgressDots(0);
  $(window).scroll(function(){
    getGroupID();
  });
  
  function getGroupID() {
    
    var scrollPosition = $(window).scrollTop();
    $(".photo__group").each(function(index){
     
      
      
      var group = $(this);
    var groupID = group.attr("data-id");
    var groupBottom = group[0].offsetHeight+group[0].offsetTop;
     
    // If a user scrolls down the page and their scroll position is greater than the bottom of the photo group, update the corresponding progress dots. 
    if (scrollPosition > groupBottom) {
        updateProgressDots(groupID);
    }
    });
    
  }
  
  // This function removes the `is-active` class from all `dot__border` elements, takes the groups `data-id` and adds a `is-active` class to that element in the series i.e. If the user is on the first group, then the first dot / dot border should have the `is-active` class.
  function updateProgressDots(groupID) {
    
    var dotBorder = $(".dot__border");
    dotBorder.removeClass("is-active");
    dotBorder.eq(parseInt(groupID)).addClass("is-active");    
  }
});
body {
  margin: 0;
}

.dots {
  position: fixed;
  right: 48px;
  bottom: 48px;
}

.dot {
  width: 5px;
  height: 5px;
  background: #000;
  border-radius: 50%;
}

.dot__border {
  border: 1px solid #000;
  padding: 4px;
  margin-bottom: 16px;
}
.dot__border.is-active {
  border: 1px solid #c62828;
}
.dot__border.is-active .dot {
  background: #c62828;
}

.photo__group {
  width: 100vw;
  height: 100vh;
  border-bottom: 1px solid #c62828;
  font-size: 48px;
  font-family: "Open Sans";
  font-weight: 700;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dots">
  <div class="dot__border is-active">
    <div class="dot"></div>
  </div>
  
  <div class="dot__border">
    <div class="dot"></div>
  </div>

  <div class="dot__border">
    <div class="dot"></div>
  </div>
  
  <div class="dot__border">
    <div class="dot"></div>
  </div>
  
  <div class="dot__border">
    <div class="dot"></div>
  </div>
  
  <div class="dot__border">
    <div class="dot"></div>
  </div>
  
  <div class="dot__border">
    <div class="dot"></div>
  </div>
  
  <div class="dot__border">
    <div class="dot"></div>
  </div>
  
  <div class="dot__border">
    <div class="dot"></div>
  </div>
  
  <div class="dot__border">
    <div class="dot"></div>
  </div>
</div>

<div class="photo__group" data-id="1">Photo group #1</div>
<div class="photo__group" data-id="2">Photo group #2</div>
<div class="photo__group" data-id="3">Photo group #3</div>
<div class="photo__group" data-id="4">Photo group #4</div>
<div class="photo__group" data-id="5">Photo group #5</div>
<div class="photo__group" data-id="6">Photo group #6</div>
<div class="photo__group" data-id="7">Photo group #7</div>
<div class="photo__group" data-id="8">Photo group #8</div>
<div class="photo__group" data-id="9">Photo group #9</div>
<div class="photo__group" data-id="10">Photo group #10</div>

推荐阅读