Question

我甚至不知道如何制定这个问题......我有2个UL块，每个块有10个LI元素，它们总是会有相同数量的元素，10,160,12等。左block是一个浮动的固定导航，右边的块有内容，我怎么知道知道哪个元素在视图上，所以在左边的块我添加一个类作为当前

<div class="leftnav">
<ul class="navigation">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
</div>

<ul>
   <li>Content 1</li>
   <li>Content 2</li>
   <li>Content 3</li>
   <li>Content 4</li>
   <li>Content 5</li>
   <li>Content 6</li>
</ul>

因此，当用户向下滚动内容2时，导航li会将类作为当前...当用户点击导航时，它会滚动到右侧的内容...是否有人知道如何执行此操作？< / p>

Answer 1

根据动态信息，假设您不能或不想影响标记，那该怎么样......

$(window).on('scroll', handleScroll);

function handleScroll (e) {
  var currentLiIndex;
  $('{second ul} li').each(function (i, e) { 
    // loop through all the second li's, 
    // find which is closest to top of the window but below the scroll
    if ($(e).offset().top > scrollY) {
      currentLiIndex = i;
      return false;
    }
  });

  // clear actives
  $(".navigation li").removeClass('active');

  // target the nav li based on the index of the top function
  // and add active class
  $(".navigation li")[currentLiIndex].addClass('active');
}

LI元素的相关UL块

1 个答案: