Wednesday, 29 May 2019

Action when an element from collection get scrolled by

I have an unknown number of section blocks. I use the titles of these automaticaly generated sections to populate the "tabs" container who follow the scroll (using sticky position).

What I need, is when I pass by one of the title contained in the sections, the same title from the "tabs" bar get the class "selected"so I indicate where the user is.

But what I've tried so far is only working partialy. Here's a working example:

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>

as you can see, the first title lose the class if you scroll to the end. But nothing else. And when you go back, the second title get the class. And overall, it doesn't work so well.



from Action when an element from collection get scrolled by

No comments:

Post a Comment