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类的所有锚点。

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

每次经过“目标”位置时，scroll_target就会减少/增加。因此，您知道由于位置数组而刚刚传递了哪个锚点。

我创建了一个文本数组，根据刚通过的锚文本更新输入。也可以是锚点的值或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>

滚动到特定点确实

1 个答案: