时间戳

首页 > 解决方案 > 滚动过去某个点确实

javascript - 滚动过去某个点确实

问题描述

一旦它通过大于或小于<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 循环我认为不能解决问题。

标签： javascriptjqueryhtml

解决方案

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

也可以有其他方式。

在加载时，我们得到了#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>

推荐阅读