Check out this simplified version of my project on a fiddle. Even though it is set up correctly, it doesn't seem to work at all.
https://jsfiddle.net/ybarpz3x/8/
I've spent the last 3 days trying to debug this issue but I just can't seem to figure it out. I have included jquery, bootstrap js, and bootstrap css, created my own .active class, and tried implementing
<body data-spy="scroll" .. >Please assist me, thank you.
$(document).ready(function(){
// Cache selectors
var lastId,
topMenu = $("#navmenu"),
topMenuHeight = topMenu.outerHeight()+15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function(){
var item = $($(this).attr("href"));
if (item.length) { return item; }
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
$('html, body').stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
var navHeight = $("#navmenu").outerHeight(true) ;
// Bind to scroll
$(window).scroll(function(){
// Get container scroll position
var fromTop = $(this).scrollTop()+navHeight;
var navCollapse = 450;
if (fromTop > navCollapse) {
$("nav li").addClass("top-menu-collapsed")
};
if (fromTop <= navCollapse) {
$("nav li").removeClass("top-menu-collapsed")
};
});
// Add scrollspy to <body>
});
$('window').load(function(){
$('body').scrollspy({target: '#navmenu', offset: navHeight});
});[CSS CODE HERE][SCRIPTS LINKS AND NAVIGATION ELEMENTS]