Scrollspy does not work

Navigation
1

Scrollspy is not working, I would like to change the class of each navbar item when the user goes through a specific section, I have made all the recommended imports in the documentation and it still does not work

Additional information: Bootstrap v4.1.2, jQuery v3.3.1


CSS:(Bootstrapv4.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;
}


HTML Code: 
<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>
    
asked by anonymous 07.12.2018 / 11:42

0 answers

Calling Methods using RMI in JAVA I am trying to make a multidimensional vertical menu with vue.js but the subitems are not appearing