代码之家 › 专栏 › 技术社区 › Keith

在某个点上滚动会

html jquery javascript

Keith · 技术社区 · 8 年前

<a> 标签。首先是页面上固定的起点:

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

这是将起始点从页面顶部设置为200px。当滚动时,它后面的容器可以是从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>

$(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> tag传递起始点,将其传递到函数中以运行我需要的内容。可能有20个 <a>

1 回复 | 直到 8 年前

Louys Patrice Bessette 8 年前

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

可能还有别的办法。

加载时,我们得到 #starting-point 所有的锚现在都有 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>