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

Question

我有侧面子弹，菜单滚动到一页的部分，我做了滚动动画，但我想在滚动时更改子弹之间的class="active"。我知道jQuery(body,window).scroll()可以通过$('#scrollspymenu li').each()很容易地实现它，但它真的很糟糕。我可以打破each()功能，但这样我仍然需要从第一个li元素到（例如）第五个li。我想用保存data-target和offsetTop将所有offsetTop+height元素添加到某个数组中，并且在滚动事件中我将检查哪个元素位于屏幕中间。 （我的意思是窗口滚动顶部位置+ 1/2窗口高度）

我不知道如何使用具有计算范围的部分来制作某种时间轴，以及哪个函数可以选择（基于输入）附加到2个范围值的元素。

我也在使用scrollMagic，也许它做得更好？仍然希望使用纯js或jquery以备将来使用。

对不起，我不能形成一个很好的具体问题，但我尽我所能。

我的评论

（..）我希望以最快的方式从滚动事件到正确的元素。页面的最佳性能。当你滚动时，它是愚蠢的，滚动功能上的1个滚动刻度是100倍，并且每个功能都是每个元素。对于4个元素，它的检查元素是400次......

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.logstuff最终应该被移除，但是会说明什么是你在什么时候开火。

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>

Answer 2

你可以看看用debounce包装你的onclick方法吗？

jQuery：http://benalman.com/projects/jquery-throttle-debounce-plugin/

或者香草JS：https://davidwalsh.name/javascript-debounce-function