<div id="production-side-nav" class="sticky-top">

<ul id="production-sidebar-list">

<ul>

<li><a href="#advertising">Advertising & Marketing</a></li>

<li><a href="#aerospace">Aerospace</a></li>

<li><a href="#agriculture">Agriculture</a></li>

<li><a href="#autonomous-driving">Autonomous Driving</a></li>

<li><a href="#education">Education</a></li>

<li><a href="#finance">Finance</a></li>

<li><a href="#healthcare">Healthcare</a></li>

<li><a href="#insurance">Insurance</a></li>

<li><a href="#media-and-entertainment">Media & Entertainment</a></li>

<li><a href="#medical">Medical</a></li>

<li><a href="#mining">Mining</a></li>

<li><a href="#retail">Retail</a></li>

<li><a href="#technology">Technology</a></li>

<li><a href="#travel">Travel</a></li>

</ul>

</ul>

</div>

<script>

$("#production-sidebar-list li a").on("click", function(e) {

var href = $(this).attr("href")

$('html, body').stop().animate({

scrollTop: $(href).offset().top - 100

}, 850);

(e).preventDefault;

});

var lastIdProduction,

topMenuProduction = $("#production-sidebar-list"),

topMenuHeightProduction = topMenuProduction.outerHeight() + 1,

// All sidenav items

menuItemsProduction = topMenuProduction.find("a"),

// Anchors for menu items

scrollItemsProduction = menuItemsProduction.map(function() {

var itemProduction = $(this).attr("href");

if (itemProduction.length) { return itemProduction; }

});

$(window).scroll(function() {

var fromTopProduction = $(this).scrollTop()+topMenuHeightProduction;

var labelProduction = '.production-section'

$(labelProduction).each(function(j){

var offsetScrollProduction = $(this).offset().top-$(window).scrollTop();

if (offsetScrollProduction <= topMenuHeightProduction - 200

&& offsetScrollProduction >= topMenuHeightProduction - 300

&& scrollItemsProduction[j] == "#" + $(this).attr("id")) {

$(menuItemsProduction).removeClass("active");

$(menuItemsProduction[j]).addClass("active");

}

})

});

</script>

<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>