Question

我有侧面子弹，菜单滚动到一页的部分，我做了一个滚动动画，但我想在滚动时改变子弹之间的class="active"。我知道jQuery(body,window).scroll()可以通过$('#scrollspymenu li').each()轻松实现这一点，但这种做法非常糟糕。我可以突破each()函数，但这样我仍然需要从第一个li元素到（例如）第五个li。我考虑过使用save 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.log内容，但会说明在什么时候为你解雇的内容。

＆＃13;

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");
    }});
  }
})

＆＃13;

#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;}

＆＃13;

<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>

＆＃13;

Answer 2

你可以看看用去抖动包裹你的onclick方法吗？

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

或vanilla JS：https://davidwalsh.name/javascript-debounce-function

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

2 个答案: