javascript - 滚动超过某个点确实

Question

我正在尝试使用滚动函数来运行函数，一旦它传递大于或小于<a>标签。首先是页面上固定的起点:

 <div style="height: 200px">
     <input type="text" id="starting-point" />
 <div>

这将起点设置为距离页面顶部 200 像素。那么滚动时(使用窗口作为滚动)，其后面的容器可以是从 1000px 到 3000px 的任何值。

 <div style="height: 200px;">
     <input type="text" id="starting-point" />
 <div>
 <div style="height: 3000px;">
     <!-- ... content here  -->
     <div style="height: 200px;">
       <a href="">1</a>
     </div>
     <div style="height: 300px;">
       <a href="">2</a>
     </div>
     <div style="height: 240px;">
       <a href="">3</a>
     </div>
     etc...
 </div>

我想要实现的是每个 <a>通过起点的标签，用于显示某些内容。因此，当滚动时，它从 1 开始，一旦 2 到达起点，页面上的某些内容(如文本框)会将其从 1 切换到 2，依此类推，然后反向返回。这是我到目前为止所拥有的:

$(document).ready(function () {
    window.addEventListener('scroll', function (e) {
    var setStart = $('#starting-point').offset().top - $(window).scrollTop(); // starting point
    var getTag = $('a');

    if (setStart >= getTag) { 
        run function here
    }else{
        run function here
    }
    });
});

我不知道如何将变量设置为 <a>标记传递该起点以将其传递到函数中以运行我需要的内容。可能有 20 <a>页面上的标签。我认为运行 for 循环不能解决问题。

Answer 1

这里有一个关于如何做到这一点的演示。

也可能有其他方法。

加载时，我们获取#starting-point 的位置以及现在具有scroll_target 类的所有 anchor 。

然后，在滚动时，您必须确定滚动方向...因为向上与向下的逻辑略有不同。

每次经过“目标”位置时，scroll_target 都会递减/递增。 因此，您可以通过位置数组知道哪个 anchor 刚刚通过。

我创建了一个文本数组来根据刚刚传递的 anchor 文本来更新输入。它也可以是 anchor 的值或 data-* 属性。

我留下了所有控制台日志供您查看发生了什么。

$(document).ready(function(){
  var startPoint = $("#starting-point").offset().top;
  console.log(startPoint);
  
  var scrollTargets_pos = [];
  var scrollTargets_text = [];
  
  var scrollingDown = true;
  var lastScroll = 0;
  
  $(".scroll_target").each(function(){
    scrollTargets_pos.push($(this).offset().top);
    scrollTargets_text.push($(this).text());
  });
  console.log(scrollTargets_pos);
  console.log(scrollTargets_text);
  
  var passedIndex = -1;
  
  $(window).on("scroll",function(){
    var scrolled = $(this).scrollTop();
    console.log(scrolled);
    
    // Scroll direction
    scrollingDown = (scrolled > lastScroll);
    lastScroll = scrolled;

    if(scrollingDown){
      // Scrolling down...
      //console.log("down");
      if( scrolled+startPoint > scrollTargets_pos[passedIndex+1] ){
        console.log("======================");
        $("#starting-point").val(scrollTargets_text[passedIndex+1]);
        passedIndex++;
      }
    }else{
      // Scrolling up...
      //console.log("up");
      if( scrolled+startPoint < scrollTargets_pos[passedIndex] ){
        console.log("======================");
        $("#starting-point").val(scrollTargets_text[passedIndex])
        passedIndex--;
      }
    }
  
  });
  
  
});  // End ready

.startPointDiv{
  position: fixed;
  top: 100px;
  left:0;
  width:100%;
  border-top: 1px solid red;
  text-align: center;
}
.content{
  height: 3000px;
  margin-top: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="startPointDiv">
   <input type="text" id="starting-point" />
</div>

<div class="content">
   <!-- ... content here  -->
   <div style="height: 200px;">
     <a href="" class="scroll_target">1</a>
   </div>
   <div style="height: 300px;">
     <a href="" class="scroll_target">2</a>
   </div>
   <div style="height: 240px;">
     <a href="" class="scroll_target">3</a>
   </div>
   etc...
</div>