How to animate left side border in the table of content

Question

I have left side content and right side table of contents.

What I am doing is when the user scrolls the page then I have to animate the right table of the content red border. I tried the below code.

 .mainWrapper{display: flex;}.leftWrap{width: 600px;margin: auto;border: 1px solid #222;}.rightwrap{position: fixed;top: 0;right: 50px;}.h-500{height:650px}.dashlineWrap{background-color: #f9f9f9;}.vc_row{height: 500px;}.rightwrap ul li { position: relative; list-style: none; padding-bottom: 15px; }.rightwrap ul li::before { content: ''; width: 2px; height: 100%; background-color: #E5E5E5; display: block; position: absolute; }.rightwrap ul li.active::before { background-color: red; }.rightwrap ul li a { padding-left: 15px; display: flex; }

 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </section> <section class="dashlineWrap" > <div class="vc_row h-500" id="tableofcontent-2"> <h4>Row 2</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </section> <section class="dashlineWrap" > <div class="vc_row h-500" id="tableofcontent-3"> <h4>Row 3</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </section> </div> <div class="rightwrap"> <ul> <li class="active"><a href="">Row 1</a></li> <li><a href="">Row 2</a></li> <li><a href="">Row 3</a></li> </ul> </div>

Answer 1

 let rowLis = document.querySelectorAll(".rightwrap li"); let section1 = document.getElementById("tableofcontent-1"); let section2 = document.getElementById("tableofcontent-2"); let section3 = document.getElementById("tableofcontent-3"); const markRow = () => { let section1Y = section1.getBoundingClientRect().top; let section2Y = section2.getBoundingClientRect().top; let section3Y = section3.getBoundingClientRect().top; if ((section1Y < 30) && (section1Y > -500)) { rowLis[0].classList.add("active"); } else rowLis[0].classList.remove("active"); if ((section2Y < -30) && (section2Y > -500)) { rowLis[1].classList.add("active"); } else rowLis[1].classList.remove("active"); if ((section3Y < -30) && (section3Y > -500)) { rowLis[2].classList.add("active"); } else rowLis[2].classList.remove("active"); } document.addEventListener("scroll", markRow);

 .mainWrapper{display: flex;}.leftWrap{width: 600px;margin: auto;border: 1px solid #222;}.rightwrap{position: fixed;top: 0;right: 50px;}.h-500{height:650px}.dashlineWrap{background-color: #f9f9f9;}.vc_row{height: 500px;}.rightwrap ul li { position: relative; list-style: none; padding-bottom: 15px; }.rightwrap ul li::before { content: ''; width: 2px; height: 100%; background-color: #E5E5E5; display: block; position: absolute; }.rightwrap ul li.active::before { background-color: red; }.rightwrap ul li a { padding-left: 15px; display: flex; }

 <div class="mainWrapper"> <div class="leftWrap"> <section class="dashlineWrap"> <div class="vc_row h-500" id="tableofcontent-1"> <h4>Row 1</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </section> <section class="dashlineWrap"> <div class="vc_row h-500" id="tableofcontent-2"> <h4>Row 2</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </section> <section class="dashlineWrap"> <div class="vc_row h-500" id="tableofcontent-3"> <h4>Row 3</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </section> </div> <div class="rightwrap"> <ul> <li><a href="">Row 1</a></li> <li><a href="">Row 2</a></li> <li><a href="">Row 3</a></li> </ul> </div> </div>