<div>
<header>
<div class="header_name">Golden</div>
<div class="header_items">
<a href="#header">Home</a>
<a href="#services">Services</a>
<a href="#portfolio">Portfolio</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</div>
</header>
<!-- Home-->
<div class="header" id="header">
...
</div>
<!-- Services -->
<div class="services" id="services">
...
</div>
<!-- Portfolio -->
<div class="portfolio" id="portfolio">
...
</div>
<!-- About Us -->
<div class="about" id="about">
...
</div>
<!-- Contact Us -->
<div class="contact" id="contact">
...
</div>
// ACTIVE ITEM OF MENU
$(window).scroll(function () {
var $sections = $('.section');
$sections.each(function (i, el) {
var top = $(el).offset().top - 0;
var bottom = top + $(el).height();
var scroll = $(window).scrollTop();
var id = $(el).attr('id');
if (scroll > top && scroll < bottom) {
$('.header_items a.active').removeClass('active');
$('.header_items a[href$="' + id + '"]').addClass('active');
}
})
});