集合中的元素滚动时的动作

时间：2019-05-22 12:43:02

标签： javascript jquery

我的节块数量未知。 我使用这些自动生成的节的标题来填充跟随滚动（使用sticky位置）的“标签”容器。

我需要的是，当我经过各节中包含的标题之一时，“选项卡”栏中的相同标题将得到"selected"类，因此我指示用户在哪里。

但是到目前为止，我所尝试的只是部分工作。 这是一个工作示例：

let titles = [];
    $.each($('section>h3'),function(){
        titles.push($(this).offset().top);
    });
    $(document).on('mousewheel DOMMouseScroll',function(e){
    let winscrollpos = $(window).scrollTop();
        $.each(titles,function(i,v){
            if(winscrollpos >= v && winscrollpos < v+100) {
                $('.deco-tab-title').eq(i).add('.selected').toggleClass('selected');
            }
        });
    });
.filler {
  height:800px;
}

.selected {
  color:red;
}

.tabs {
  background-color:#eee;
  position:sticky;
  top:0;
}

p {
  width:200px
}

.tabs h3 {
  display:inline;
  margin-left:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='main'>
  <div class='filler'>
    
  </div>
  <div class='wrapper'>
  <div class='tabs'><h3 class='deco-tab-title selected'>title1</h3><h3 class='deco-tab-title'></h3><h3 class='deco-tab-title'>title2</h3><h3 class='deco-tab-title'>title3</h3><h3 class='deco-tab-title'>title4</h3></div>
  <div class='core'>
    <section>
      <h3 class='deco-tab-title'>title1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
    </section>
    <section>
      <h3 class='deco-tab-title'>title2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
    </section>
    <section>
      <h3 class='deco-tab-title'>title3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
    </section>
    <section>
      <h3 class='deco-tab-title'>title4</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
    </section>
  </div>
  </div>
</div>

如您所见，如果滚动到末尾，第一个标题将失去课程。但没有别的。而当您返回时，第二个标题将上课。总体而言，它不能很好地工作。

2 个答案:

答案 0 :(得分：1)

  1. 您可能想使用scroll事件，该事件也会使用滚动条捕获。
  2. 滚动高度取决于用户代理。你应该比较 [offset of current tab] < winscrollpos < offset[next tab]而非[offset of current tab] < winscrollpos < offset[current tab] + 100。

这是一个工作示例：

let titles = [];

$.each($('section>h3'), function () {
    titles.push($(this).offset().top);
});

$(document).on('scroll', function (e) {
    // 50 for the tab title height
    let winscrollpos = $(window).scrollTop() + 50;
    let titleElements = $('.deco-tab-title');
    $.each(titles, function (i, v) {
        if (winscrollpos >= v && (i === titles.length - 1 || winscrollpos < titles[i + 1])) {
            titleElements.eq(i).addClass('selected');
        } else {
            titleElements.eq(i).removeClass('selected');
        }
    });
});
.filler {
  height:800px;
}

.selected {
  color:red;
}

.tabs {
  background-color:#eee;
  position:sticky;
  top:0;
}

p {
  width:200px
}

.tabs h3 {
  display:inline;
  margin-left:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='main'>
    <div class='filler'>
    
    </div>
    <div class='wrapper'>
    <div class='tabs'><h3 class='deco-tab-title selected'>title1</h3><h3 class='deco-tab-title'>title2</h3><h3 class='deco-tab-title'>title3</h3><h3 class='deco-tab-title'>title4</h3></div>
    <div class='core'>
    <section>
        <h3 class='deco-tab-title'>title1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
    </section>
    <section>
        <h3 class='deco-tab-title'>title2</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
    </section>
    <section>
        <h3 class='deco-tab-title'>title3</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
    </section>
    <section>
        <h3 class='deco-tab-title'>title4</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
    </section>
    </div>
    </div>
</div>

答案 1 :(得分：0)

我在您的代码中做了以下修复：

  • add('.selected').toggleClass('selected')：以这种方式链接两个功能无法正常工作。这就是为什么您的标题在被选中时会以某种方式闪烁的原因。我已使用此版本的toggleClass
    • 代替了它
  • 我添加了另一个列表nextTitlePos，以便为每个标题存储下一个标题的位置。对于最后一个，您可以使用大于容器末尾的任何值（我在这里使用Number.MAX_VALUE是为了保持简单，但如果需要，也可以使用容器末尾。）< / li>
  • 在HTML代码中，还有一个额外的<h3>标签，该标签为空。这是因为title2不能正确突出显示。
  • 编辑：我也将事件mousewheel替换为scroll（正如Shridhar Sharma在下面的评论中提到的-谢谢）

    let titles = [];
    $.each($('section>h3'),function(){
        titles.push($(this).offset().top);
    });
    let nextTitlePos = [];
    $.each(titles, function(i, v) {
          if(i != 0) {
              nextTitlePos.push(v);
          }
    }); 
    nextTitlePos.push(Number.MAX_VALUE);
    $(document).on('scroll DOMMouseScroll',function(e){
    let winscrollpos = $(window).scrollTop();
        $.each(titles,function(i,v){
            let isSelected = winscrollpos >= v && winscrollpos < nextTitlePos[i];
            $('div.tabs>h3.deco-tab-title').eq(i).toggleClass('selected', isSelected);
        });
    });
.filler {
  height:800px;
}

.selected {
  color:red;
}

.tabs {
  background-color:#eee;
  position:sticky;
  top:0;
}

p {
  width:200px
}

.tabs h3 {
  display:inline;
  margin-left:50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='main'>
  <div class='filler'>
    
  </div>
  <div class='wrapper'>
  <div class='tabs'><h3 class='deco-tab-title selected'>title1</h3><!-- REMOVED <h3 class='deco-tab-title'></h3> --><h3 class='deco-tab-title'>title2</h3><h3 class='deco-tab-title'>title3</h3><h3 class='deco-tab-title'>title4</h3></div>
  <div class='core'>
    <section>
      <h3 class='deco-tab-title'>title1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
    </section>
    <section>
      <h3 class='deco-tab-title'>title2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
    </section>
    <section>
      <h3 class='deco-tab-title'>title3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
    </section>
    <section>
      <h3 class='deco-tab-title'>title4</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ligula sem, elementum a leo in, aliquam blandit orci. Ut scelerisque auctor tincidunt. Phasellus at dui eget nisl varius porttitor. Quisque fermentum nisi a quam consectetur, non malesuada urna maximus. Phasellus vehicula ante a felis molestie gravida vel ac augue. Duis ullamcorper malesuada nibh. Etiam non pulvinar ex. Proin rhoncus sagittis pulvinar. Suspendisse ac urna dui. Proin nec tempus augue, at molestie libero. Duis ut libero ut diam mollis pharetra et ac dui.</p>
    </section>
  </div>
  </div>
</div>

相关问题
最新问题