На прокрутке вниз добавьте класс в следующий элемент и удалите класс из родительского элемента

Question

Мне было интересно, как была эта боковая навигация по this website? Поэтому, когда вы прокручиваете вниз, следующий элемент получает , выделенный, а предыдущий получает не освещен. В моем случае, я хочу, когда я прокрутку вниз, следующий элемент получает класс current и предыдущий элемент, который удаляется. И когда он достигнет конца, и вы прокрутите вниз, он снова начнется с первого элемента.

Вот мой сниппет:

* { 
 
    box-sizing: border-box; 
 
} 
 
body { 
 
    background: #000; 
 
} 
 
*, 
 
html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.line-container { 
 
    width: 100px; 
 
    display: -webkit-flex; 
 
    display: -moz-flex; 
 
    display: -ms-flex; 
 
    display: -o-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: column; 
 
    -moz-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    -o-flex-direction: column; 
 
    flex-direction: column; 
 
    position: fixed; 
 
    top: 50%; 
 
    left: 50%; 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -o-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
} 
 
.line { 
 
    width: 25px; 
 
    height: 5px; 
 
    background-color: #fff; 
 
    margin-bottom: 1.5em; 
 
    cursor: pointer; 
 
    transition: all 0.35s ease-in-out; 
 
} 
 
.current { 
 
    width: 45px; 
 
    background-color: #fff; 
 
    transition: all 0.35s ease-in-out; 
 
}

<div class="line-container" id="container"> 
 
    <div class="line current"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
    <div class="line"></div> 
 
</div>

Answer 1

Вы можете попробовать использовать JQuery и BootstrapJS для создания прокрутки-шпиона. Посмотрите этот урок: http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp Scroll-spy добавляет класс active, когда вы прокручиваете до целевого элемента, даже не нажимая на навигацию. Надеюсь, это решит вашу проблему;)

P.S. Также проверьте, что делает атрибут onscroll="yourFunction()".