Scrollspy não está funcionando, gostaria que mudasse a classe de cada item do navbar quando o usuário passasse por uma section específica, fiz todas as importações recomendadas na documentação e ele ainda não funciona
Informações adicionais: Bootstrap v4.1.2, jQuery v3.3.1
CSS: (Bootstrap v4.1.2)
.header_area.navbar_fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: white;
-webkit-box-shadow: 0px 4px 6px 0px rgba(12, 0, 46, 0.06);
box-shadow: 0px 4px 6px 0px rgba(12, 0, 46, 0.06);
}
.header_area.navbar_fixed .menu_one {
padding: 0px;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.header_area.navbar_fixed .menu_one .btn_get {
-webkit-box-shadow: none;
box-shadow: none;
}
.header_area.navbar_fixed .sticky_logo img {
display: none;
}
.header_area.navbar_fixed .sticky_logo img+img {
display: block;
}
.header_area.navbar_fixed .w_menu .nav-item .nav-link {
color: #051441;
}
.header_area.navbar_fixed .w_menu .nav-item .nav-link:before {
background: #051441;
}
.header_area.navbar_fixed .menu_two .menu_toggle .hamburger-cross span,
.header_area.navbar_fixed .menu_two .menu_toggle .hamburger span {
background: #051441;
}
.header_area.navbar_fixed .menu_two .nav_right_btn .login_btn.active,
.header_area.navbar_fixed .menu_two .nav_right_btn .login_btn:hover {
border-color: #00aff0;
color: #00aff0;
-webkit-box-shadow: none;
box-shadow: none;
}
.header_area.navbar_fixed .menu_two .nav_right_btn .login_btn.active:hover {
background: #00aff0;
color: #fff;
}
.header_area.navbar_fixed .menu_four .btn_get {
border: 2px solid #ccc5fa;
-webkit-box-shadow: none;
box-shadow: none;
}
.header_area.navbar_fixed .menu_four .btn_get:hover {
border-color: #6754e2;
}
.header_area.navbar_fixed .menu_four .menu_toggle .hamburger span,
.header_area.navbar_fixed .menu_four .menu_toggle .hamburger-cross span {
background: #6754e2;
}
.header_area.navbar_fixed .nav_right_btn .login_btn {
color: #051441;
}
.header_area.navbar_fixed .menu_five .btn_get {
border-color: #3d64f4;
color: #3d64f4;
}
.header_area.navbar_fixed .menu_five .btn_get:hover {
background: #3d64f4;
color: #fff;
}
.header_area.navbar_fixed .menu_five .menu_toggle .hamburger-cross span,
.header_area.navbar_fixed .menu_five .menu_toggle .hamburger span {
background: #3d64f4;
}
.header_area.navbar_fixed .menu_six .menu>.nav-item>.nav-link {
color: #051441;
}
.header_area.navbar_fixed .menu_six .menu>.nav-item:hover>.nav-link,
.header_area.navbar_fixed .menu_six .menu>.nav-item.active>.nav-link {
color: #3d57f4;
}
.header_area.navbar_fixed .menu_six .menu>.nav-item:hover>.nav-link:before,
.header_area.navbar_fixed .menu_six .menu>.nav-item.active>.nav-link:before {
background: #3d57f4;
}
.header_area.navbar_fixed .menu_six .menu_toggle .hamburger-cross span,
.header_area.navbar_fixed .menu_six .menu_toggle .hamburger span {
background: #3d57f4;
}
.header_area.navbar_fixed .menu_six .btn_get {
border-color: #3d57f4;
-webkit-box-shadow: none;
box-shadow: none;
color: #3d57f4;
}
.header_area.navbar_fixed .menu_six .btn_get:hover {
color: #fff;
}
.header_area.navbar_fixed .menu_seven .menu>.nav-item>.nav-link {
color: #051441;
}
.header_area.navbar_fixed .menu_seven .menu>.nav-item:hover>.nav-link,
.header_area.navbar_fixed .menu_seven .menu>.nav-item.active>.nav-link {
color: #4069eb;
}
.header_area.navbar_fixed .menu_seven .menu>.nav-item:hover>.nav-link:before,
.header_area.navbar_fixed .menu_seven .menu>.nav-item.active>.nav-link:before {
background: #4069eb;
}
.header_area.navbar_fixed .menu_seven .btn_get {
border-color: #4069eb;
color: #4069eb;
}
.header_area.navbar_fixed .menu_seven .btn_get:hover {
background: #4069eb;
color: #fff;
}
.header_area.navbar_fixed .menu_seven .menu_toggle .hamburger-cross span,
.header_area.navbar_fixed .menu_seven .menu_toggle .hamburger span {
background: #4069eb;
}
.header_area.navbar_fixed .menu_eight .saas_btn {
border-color: #23b1fe;
-webkit-box-shadow: none;
box-shadow: none;
}
.header_area.navbar_fixed .menu_eight .saas_btn:hover {
background: #23b1fe;
color: #fff;
}
.header_area.navbar_fixed .menu_eight .menu_toggle .hamburger span,
.header_area.navbar_fixed .menu_eight .menu_toggle .hamburger-cross span {
background: #23b1fe;
}
.header_area.navbar_fixed.header_area_five .menu_one {
padding: 0px 50px;
}
Código HTML:
<body data-spy="scroll" data-target=".navbar" style="body {position: relative;}">
<header class="header_area">
<nav class="navbar navbar-expand-lg menu_one menu_four">
<div class="container custom_container p0">
<a class="navbar-brand" href="#"><img src="src/assets/img/logo.png" alt="logo"></a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="menu_toggle">
<span class="hamburger">
<span></span>
<span></span>
<span></span>
</span>
<span class="hamburger-cross">
<span></span>
<span></span>
</span>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav menu pl_120" align="right">
<li class="nav-item dropdown submenu active">
<a class="nav-link dropdown-toggle" href="#" role="button" aria-haspopup="true"
aria-expanded="false">
Home
</a>
</li>
<li class="nav-item dropdown submenu mega_menu">
<a class="nav-link dropdown-toggle" href="#sobre" role="button" aria-haspopup="true"
aria-expanded="false">
Sobre
</a>
</li>
<li class="nav-item dropdown submenu">
<a class="nav-link dropdown-toggle" href="#servicos" role="button" aria-haspopup="true"
aria-expanded="false">
Serviços
</a>
</li>
<li class="nav-item dropdown submenu">
<a class="nav-link dropdown-toggle" href="#portfolio" role="button" aria-haspopup="true"
aria-expanded="false">
Projetos
</a>
</li>
<li class="nav-item dropdown submenu">
<a class="nav-link dropdown-toggle" href="#contato" role="button" aria-haspopup="true"
aria-expanded="false">
Contato
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>