Изменить класс начальной загрузки при прокрутке на другом div

Question

Im пытается сделать небольшое портфолио для моего проекта fcc. Я хочу, чтобы мои навигационные ссылки меняли активный класс, когда целевой div находится в фокусе. Я использую bootstrap в этом коде Here is my codepen link. пожалуйста, помогите

<div id="navbar" class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav navbar-right link"> 
     <li><a href="#about" class="links">About</a></li> 
     <li><a href="#" class="links">Works</a></li> 
     <li><a href="#" class="links">Contacts</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 

И мой Jquery

$(document).ready(function() { 
$('a[href*="#"]:not([href="#"])').click(function() { 
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
    var target = $(this.hash); 
    target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
    if (target.length) { 
    $('html, body').animate({ 
     scrollTop: target.offset().top 
    }, 1000); 
    return false; 
    } 
} 
});/* end of clickto scroll function */ 



var scroll_start = 0; 
var startchange = $('#button-down'); 
var offset = startchange.offset(); 
if (startchange.length){ 
$(document).scroll(function() { 
    scroll_start = $(this).scrollTop(); 
    if(scroll_start > offset.top) { 
     $(".navbar").css('background-color', '#333'); 

    } else { 
     $('.navbar').css('background-color', 'transparent'); 
    } 
    }); 
} 
}); 

Answer 1

Поиск начальной загрузки документации она имеет плагин именно для того, что вам нужно: affix

Answer 2

Что вы разрабатываете это одна страница портфеля, так что когда пользователь нажимает «Мой проект», она будет прокручиваться в разделе «Мои проекты».

Попробуйте Scrollspy от бутстрапа. добавление пользовательских классов в scrollspy поможет.

Если вы спешите, используйте this template, а затем стилизацию в соответствии с вашими потребностями.