Navbar active scroll on footer

Question

My one page layout is working perfectly except for one issue. The navbar links when clicked changes color according to where the user goes to or scrolls.

The problem is that when I click on the "Contact Us" link, the navbar scrolls to that position but the navbar link doesn't change color as pictured above. It works for every other section just not for the bottom because the area isn't big enough.

 window.onload=function(){ // Cache selectors var lastId, topMenu = $("#top-menu"), 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(); }); // Bind to scroll $(window).scroll(function(){ // Get container scroll position var fromTop = $(this).scrollTop()+topMenuHeight; // Get id of current scroll item var cur = scrollItems.map(function(){ if ($(this).offset().top < fromTop) return this; }); // Get the id of the current element cur = cur[cur.length-1]; var id = cur && cur.length ? cur[0].id : ""; if (lastId !== id) { lastId = id; // Set/remove active class menuItems .parent().removeClass("active") .end().filter("[href='#"+id+"']").parent().addClass("active"); } }); }//]]> 

 @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Regular.otf') } @font-face { font-family: 'MontserratSlim'; src: url('fonts/Montserrat-ExtraLight.otf') } body { font-family: Helvetica, Arial; margin: 0px; } #header { top: 0px; } .signsize { width: 140px; height: 90px; } .movesimg { float: right; } .packing { float: left; } h1 { font-family: 'Montserrat'; font-size: 50px; text-align: right; color: #3d3d3d; margin:0; } h2 { margin: 0; color: #3d3d3d; } h3 { color: #3d3d3d; } h4 { font-family: 'Montserrat'; font-size: 50px; text-align: left; color: #3d3d3d; margin:0; } h5 { font-size: 50px; padding-top: 60px; color: #3d3d3d; margin: 0; } h6 { font-family: 'MontserratSlim'; font-size: 15px; text-align: left; color: #929292; margin:0; } #descriptionl { font-family: 'MontserratSlim'; font-size: 15px; color: #929292; margin:0; } #descriptionr { font-family: 'MontserratSlim'; font-size: 15px; color: #929292; text-align: right; margin:0; } #movessec { display: inline-block; padding-top: 60px; padding-bottom: 60px; border-bottom: solid thin #d8d8d8; } #navbar { position: fixed; z-index: 1; background: white; right: 0px; top: 0px; width: 100%; } #logo { float: left; margin-left: 10%; padding-top: 10px; padding-bottom: 10px; } #top-menu { z-index: 1; float: right; padding-right: 10%; padding-top: 25px; padding-bottom: 25px; } #top-menu li { float: left; list-style-type: none; white-space: nowrap; font-size: 15px; font-family: Montserrat; text-transform: uppercase; font-weight: 600; text-align: center; letter-spacing: 1px; } #more { padding-left: 50px; } #moreR { padding-right: 50px; } #more li { float: left; list-style-type: none; white-space: nowrap; font-size: 15px; font-family: Montserrat; text-transform: uppercase; font-weight: 600; text-align: center; letter-spacing: 1px; padding: 8px; outline: #4690d4 solid thin; text-decoration: none; } #moreR li { float: right; list-style-type: none; white-space: nowrap; font-size: 15px; font-family: Montserrat; text-transform: uppercase; font-weight: 600; text-align: center; letter-spacing: 1px; padding: 8px; outline: #4690d4 solid thin; text-decoration: none; } #top-menu a { display: inline; width: 6em; text-align: center; padding: 15px; -webkit-transition: .5s all ease-out; -moz-transition: .5s all ease-out; transition: .5s all ease-out; color: #545454; text-decoration: none; letter-spacing: 1px; } #top-menu a:hover { color: #575757; } #top-menu li.active a { color: white; position: relative; background: #4690d4; } #home { padding-left: 70px; padding-top: 150px; height: 800px; background-image: url(img/movingboxes.jpg); background-size: cover; background-repeat: no-repeat; font-family: Montserrat; } #services { height: 1600px; } #servicesleft { float: left; height: 100%; width: 12%; } #servicesmain { float: left; height: 100%; width: 76%; } #servicesright { float: left; height: 100%; width: 12%; } #moving { height: 800px; padding-top: 50px; padding-left: 12%; padding-right: 12%; background-image: url('img/cardboardbright.jpg'); font-family: Montserrat; } #quote { height: 800px; background: grey; } #contact { height: 325px; } #contactleft { float: left; height: 100%; width: 12%; background: white; } #contactmain { float: left; height: 100%; width: 76%; background: white; } #contactright { float: left; height: 100%; width: 12%; background: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="header"> <div id="navbar"> <div id="logo"> <img src="logosmall.png"> </div> <ul id="top-menu"> <li class="active"> <a href="#home">Home</a> </li> <li> <a href="#services">Services</a> </li> <li> <a href="#moving">Moving Tips</a> </li> <li> <a href="#quote">Get A Quote</a> </li> <li> <a href="#contact">Contact Us</a> </li> </ul> </div> </div> <div id="home"> Content Here. </div> <div id="services"> <div id="servicesleft"></div> <div id="servicesmain"> <div id="movessec"> Content Here. </div> <div id="movessec"> Content Here. </div> <div id="movessec"> Content Here. </div> </div> <div id="servicesright"></div> </div> <div id="moving">Content here.</div> <div id="quote">Quote form goes here.</div> <div id="contact"> <div id="contactleft">Content Here</div> <div id="contactmain">Content Here</div> <div id="contactright">Content Here</div> </div> </body> 

Answer 1

You could move the change of the active class to the click, here i have commented out the change that happens on scroll, moved it to the click event, and also added a line to get the id:

 window.onload=function(){ // Cache selectors var lastId, topMenu = $("#top-menu"), 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"), id = href.split('#')[1], offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1; $('html, body').stop().animate({ scrollTop: offsetTop }, 300); e.preventDefault(); menuItems.parent().removeClass("active").end().filter("[href='#"+id+"']").parent().addClass("active"); }); // Bind to scroll $(window).scroll(function(){ // Get container scroll position var fromTop = $(this).scrollTop()+topMenuHeight; // Get id of current scroll item var cur = scrollItems.map(function(){ if ($(this).offset().top < fromTop) return this; }); // Get the id of the current element cur = cur[cur.length-1]; var id = cur && cur.length ? cur[0].id : ""; if (lastId !== id) { lastId = id; // Set/remove active class //menuItems // .parent().removeClass("active") // .end().filter("[href='#"+id+"']").parent().addClass("active"); } }); }//]]> 

 @font-face { font-family: 'Montserrat'; src: url('fonts/Montserrat-Regular.otf') } @font-face { font-family: 'MontserratSlim'; src: url('fonts/Montserrat-ExtraLight.otf') } body { font-family: Helvetica, Arial; margin: 0px; } #header { top: 0px; } .signsize { width: 140px; height: 90px; } .movesimg { float: right; } .packing { float: left; } h1 { font-family: 'Montserrat'; font-size: 50px; text-align: right; color: #3d3d3d; margin:0; } h2 { margin: 0; color: #3d3d3d; } h3 { color: #3d3d3d; } h4 { font-family: 'Montserrat'; font-size: 50px; text-align: left; color: #3d3d3d; margin:0; } h5 { font-size: 50px; padding-top: 60px; color: #3d3d3d; margin: 0; } h6 { font-family: 'MontserratSlim'; font-size: 15px; text-align: left; color: #929292; margin:0; } #descriptionl { font-family: 'MontserratSlim'; font-size: 15px; color: #929292; margin:0; } #descriptionr { font-family: 'MontserratSlim'; font-size: 15px; color: #929292; text-align: right; margin:0; } #movessec { display: inline-block; padding-top: 60px; padding-bottom: 60px; border-bottom: solid thin #d8d8d8; } #navbar { position: fixed; z-index: 1; background: white; right: 0px; top: 0px; width: 100%; } #logo { float: left; margin-left: 10%; padding-top: 10px; padding-bottom: 10px; } #top-menu { z-index: 1; float: right; padding-right: 10%; padding-top: 25px; padding-bottom: 25px; } #top-menu li { float: left; list-style-type: none; white-space: nowrap; font-size: 15px; font-family: Montserrat; text-transform: uppercase; font-weight: 600; text-align: center; letter-spacing: 1px; } #more { padding-left: 50px; } #moreR { padding-right: 50px; } #more li { float: left; list-style-type: none; white-space: nowrap; font-size: 15px; font-family: Montserrat; text-transform: uppercase; font-weight: 600; text-align: center; letter-spacing: 1px; padding: 8px; outline: #4690d4 solid thin; text-decoration: none; } #moreR li { float: right; list-style-type: none; white-space: nowrap; font-size: 15px; font-family: Montserrat; text-transform: uppercase; font-weight: 600; text-align: center; letter-spacing: 1px; padding: 8px; outline: #4690d4 solid thin; text-decoration: none; } #top-menu a { display: inline; width: 6em; text-align: center; padding: 15px; -webkit-transition: .5s all ease-out; -moz-transition: .5s all ease-out; transition: .5s all ease-out; color: #545454; text-decoration: none; letter-spacing: 1px; } #top-menu a:hover { color: #575757; } #top-menu li.active a { color: white; position: relative; background: #4690d4; } #home { padding-left: 70px; padding-top: 150px; height: 800px; background-image: url(img/movingboxes.jpg); background-size: cover; background-repeat: no-repeat; font-family: Montserrat; } #services { height: 1600px; } #servicesleft { float: left; height: 100%; width: 12%; } #servicesmain { float: left; height: 100%; width: 76%; } #servicesright { float: left; height: 100%; width: 12%; } #moving { height: 800px; padding-top: 50px; padding-left: 12%; padding-right: 12%; background-image: url('img/cardboardbright.jpg'); font-family: Montserrat; } #quote { height: 800px; background: grey; } #contact { height: 325px; } #contactleft { float: left; height: 100%; width: 12%; background: white; } #contactmain { float: left; height: 100%; width: 76%; background: white; } #contactright { float: left; height: 100%; width: 12%; background: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div id="header"> <div id="navbar"> <div id="logo"> <img src="logosmall.png"> </div> <ul id="top-menu"> <li class="active"> <a href="#home">Home</a> </li> <li> <a href="#services">Services</a> </li> <li> <a href="#moving">Moving Tips</a> </li> <li> <a href="#quote">Get A Quote</a> </li> <li> <a href="#contact">Contact Us</a> </li> </ul> </div> </div> <div id="home"> Content Here. </div> <div id="services"> <div id="servicesleft"></div> <div id="servicesmain"> <div id="movessec"> Content Here. </div> <div id="movessec"> Content Here. </div> <div id="movessec"> Content Here. </div> </div> <div id="servicesright"></div> </div> <div id="moving">Content here.</div> <div id="quote">Quote form goes here.</div> <div id="contact"> <div id="contactleft">Content Here</div> <div id="contactmain">Content Here</div> <div id="contactright">Content Here</div> </div> </body> 

Answer 2

通过将min-height设置为100vh ，可以确保它始终至少是用户屏幕的高度。