When div is visible on screen add .active class to li-CodePudding

I am trying to build a page: Like This

When a div gets into the view on the screen, then a class gets added to the right side of the "table of contents", then when it's scrolled off the screen and another div shows up the class gets moved to the next "title" of the content.

So far I have a list of divs stacked on the top of each other and some basic JS but it does not work. I am not even sure if this is a good approach to get this done?

$(window).scroll(function(){
  if ( $('#field-wrap1').offset().top <= 100 ) {
    $('#slide-li1').addClass("active");
  }else{
    $('#slide-li1').removeClass("active");
  }
});

JSFiddle

CodePudding user response：

In the solution below, I divided the value of this.scrollY by 200, since the height of the containers is 200px. I added the result of this action to the end of the slide-li statement to use as the id of the targeted item.

function removeClass() {
  for(let i = 0 ; i < 6 ; i  )
    $(`#slide-li${i   1}`).removeClass("active");
}

$(window).scroll(function(){
    console.clear();
    console.log(`Scroll: ${this.scrollY}`);
    
    removeClass();
    let visibleElement = Math.floor(this.scrollY / 200);
    $(`#slide-li${visibleElement   1}`).addClass("active");
});

#container {
     width: 800px;
     margin: auto;
     text-align: left;
     display: inline-flex;
     margin: 0;
     margin: 100px 0;
}
 #field {
     width: 500px;
     float: left;
     font-weight: 500;
     color: #001737;
}
 .field-wrap {
     padding: 0;
     border-bottom: 1px solid #8392A5;
     height: 200px;
     background-color: #FF000030;
}
 #slidecart {
     position: fixed;
     top: 10px;
     right: 0px;
     width: 300px;
     display: inline-block;
     padding: 20px;
     border-left: 1px solid #8392A5;
}
 #slide-ul {
     list-style-type: none;
     margin: 0;
     padding: 5px 0 0 5px;
}
 .slide-li {
     margin: 0;
     padding: 0 0 0 10px;
     cursor: pointer;
}
 .active {
     padding: 0 0 0 5px;
     border-left: 5px solid #0168FA;
     color: #0168FA;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div id="field">
    <div id="field-wrap1" >
      1.) - Hello World!
    </div>
    
    <div id="field-wrap2" >
      2.) - Hello World!
    </div>
    
    <div id="field-wrap3" >
      3.) - Hello World!
    </div>
    
    <div id="field-wrap4" >
      4.) - Hello World!
    </div>
    
    <div id="field-wrap5" >
      5.) - Hello World!
    </div>
    
    <div id="field-wrap6" >
      6.) - Hello World!
    </div>
    
  </div>

  <div id="slidecart">
    TABLE OF CONTENTS
    <ul id="slide-ul">LIST
      <li id="slide-li1" >1.) - Hello World!</li>
      <li id="slide-li2" >2.) - Hello World!</li>
      <li id="slide-li3" >3.) - Hello World!</li>
      <li id="slide-li4" >4.) - Hello World!</li>
      <li id="slide-li5" >5.) - Hello World!</li>
      <li id="slide-li6" >6.) - Hello World!</li>
    </ul>
  </div>

</div>

CodePudding user response：

<body>
<div id="container">
</div>
<div id="menu" style="position: fixed; width: 200px; left: 650px; top: 20px;">
</div>
<script>
i = 1;
var container = document.querySelector("#container");
var menu = document.querySelector("#menu");
while (i < 30) {
    text = "asdf ".repeat(800);
    html = `<div class='section' style='width: 600px;'><span style='font-weight: bold;'>paragraph ${i}</span><br />${text}<div></div>`;
    container.innerHTML = container.innerHTML   html;
    i = i   1;
}

function draw_menu() {
    var sections = Array.from(document.querySelectorAll(".section"));
    i = 1;
    html = '';
    var triggered = false;
    sections.forEach(function (value, key, array) {
        var r = window.scrollY;
        if (r >= value.offsetTop || triggered === true) {
            html = html   `<div>paragraph ${i}</div>`;
        } else  {
            triggered = true;
            html = html   `<div style='font-weight: bold;'>paragraph ${i}</div>`;
        }
        i = i   1;
    });
    menu.innerHTML = html;
}

var old_scroll;
setInterval(function () {
    if (window.scrollY != old_scroll) {
        old_scroll = window.scrollY;
        draw_menu();
    }
}, 20);
</script>
</body>