javascript - 如何选择范围之间的元素？

Question

我有侧项目符号，菜单滚动到一页的部分，我做了滚动动画，但我想在滚动时更改项目符号之间的class="active"。我知道它可以通过 jQuery(body,window).scroll() 和 $('#scrollspymenu li').each() 轻松实现，但这确实很糟糕。我可以突破 each() 函数，但这样我仍然需要从第一个 li 元素到(例如) 第 5 个 li。我考虑过使用 save offsetTop 和 offsetTop+height 将所有 data-target 元素获取到某个数组，并在滚动事件中检查哪个元素是在屏幕中间。 (我的意思是窗口滚动顶部位置 + 1/2 窗口高度)

我不知道如何制作某种带有计算范围的部分的时间线，以及什么函数可以选择(基于输入)附加到 2 个范围值的元素。

我也在使用scrollMagic，也许它效果更好？以后还是想用纯js或者jquery。

很抱歉我无法提出一个好的具体问题，但我尽力了。

我的评论

(..) I want fastest possible way to get from scrolll event to proper element. Best possible performance of the page. It's stupid when u scroll, 1 scroll tick is 100x on scroll function, and every function goes every element. For 4 elements its checks elements 400 times...

JS

var page = $("html, body");
$('#scrollspymenu a, .go-to, .go-to2').click(function(event) {
    event.preventDefault();
    var target = $(this).attr('data-target');
    if(target){
        page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function(){
           page.stop();
       });
       page.animate({ scrollTop: $(target).offset().top-50 }, 700, function(){
           page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove");
       });
    }
})

Html 侧边菜单

 <nav id="scrollspymenu">
<ul>
    <li class="active"><a href="#" data-target=".sec-home-knaufgroup"><span>Knauf Group</span></a></li>
    <li><a href="#" data-target=".sec-company-history"><span>History</span></a></li>
    <li><a href="#" data-target=".sec-company-values"><span>Values</span></a></li>
    ()...)
    <li><a href="#" data-target=".sec-company-automobile"><span>Automobile industry</span></a></li>
    <li><a href="#" data-target=".sec-company-solutions"><span>Solutions</span></a></li>
</ul>

Answer 1

首先，我不能 100% 确定这能解决您的问题，因为我并不完全清楚其意图。

它的作用是，如果您单击菜单，它会滚动到关联的目标。此外，如果您按 Tab 键、Shift-Tab 键，它会滚动到关联的目标。如果将鼠标悬停在菜单上，然后滚动，则会滚动目标。我想您已经明白了这个想法，如果不是 100% 的解决方案，也许您可​​以从中构建。

console.log内容最终应该被删除，但会说明什么时候为您触发了什么。

var page = $("html,body");
$('#scrollspymenu').on('click scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove', 'a', function(event) {
 // event.preventDefault();
  event.stopImmediatePropagation();
  var elem = $(this);
  var target = elem.data('target');
  $('.active').removeClass('active');
  if (!!target) {
    $(target).addClass('active');
    elem.addClass('active');
    console.log('in here');
    page.off("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove", function() {
      console.log('in stop');
      page.stop(); // stop any animation
    });
    page.animate({
      scrollTop: ($(target).offset().top - 50)
    }, {duration:700, start:function() {
   
      console.log('in callback', $(target).offset().top - 50);
      page.on("scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove");
    }});
  }
})

#pagethings {
  margin-left: 200px;
}

#contentbody {
  float: right;
  width: 100%;
  background-color: #F0F0F0;
}

#scrollspymenu {
  float: left;
  width: 200px;
  margin-left: -200px;
  background-color: #CCCCCC;
  /* fix to top */
  position: fixed;
  /* force scroll bars */
  overflow: scroll;
}

.section {
  margin: 1em;
  padding-bottom: 4em;
}

#clearingdiv {
  clear: both;
}
.active{ background-color: #EECCAA;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="pagethings">
  <nav id="scrollspymenu">
    <ul>
      <li class="active"><a href="#" data-target=".sec-home-knaufgroup"><span>Knauf Group</span></a></li>
      <li><a href="#" data-target=".sec-company-history"><span>History</span></a></li>
      <li><a href="#" data-target=".sec-company-values"><span>Values</span></a></li>
      <li><a href="#" data-target=".sec-company-automobile"><span>Automobile industry</span></a></li>
      <li><a href="#" data-target=".sec-company-solutions"><span>Solutions</span></a></li>
    </ul>
  </nav>

  <div id="contentbody">
    <div class="section sec-company-home sec-home-knaufgroup">My Home of my grand thing</div>
    <div class="section sec-company-history">History of my grand thing</div>
    <div class="section sec-company-values">Values of my grand thing</div>
    <div class="section sec-company-automobile">My great car of my grand thing. I might put something bigger in here, pictures etc so I fake this with some text to make it bigger. The brown cow jumped over the crazy blue moon but why is that moon blue and how can that cow breathe when jumping over
      a moon and why is it "over" the moon not "around" the moon for a literal quotation?</div>
    <div class="section sec-company-solutions">Solution of my grand thing, drive my great car fast</div>

  </div>
</div>