While the set-up below is functional for content within section height limits, it fails when exceeding the limit causing overflow.
Adding "display: table" or "overflow: hidden" to fix the overflow issue affects the menu's active state behavior.
Setting sections' heights to auto instead of 100% results in overlapping sections and disrupts the layout.
I urgently need help as the entire project layout hinges on resolving this issue.
Any suggestions are greatly appreciated. Thank you.
HTML
<header>
<nav>
<ul>
<li><a class="link active" href="#section_one">Section One</a>
</li>
<li><a class="link" href="#section_two">Section Two</a>
</li>
<li><a class="link" href="#section_three">Section Three</a>
</li>
<li><a class="link" href="#section_four">Section Four</a>
</li>
</ul>
</nav>
</header>
... (Additional HTML code)
CSS
* {
margin: 0;
padding: 0;
border: 0px none;
font-family: "Calibri", sans-serif;
font-weight: 700;
font-size: 16px;
vertical-align: top;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
... (CSS codes)
JavaScript
// Script for Header scroll compensation and smooth scrolling
$(document).ready(function () {
$(window).scroll(function () {
var y = $(this).scrollTop();
$('.link').each(function (event) {
if (y >= $($(this).attr('href')).offset().top - 40) {
$('.link').not(this).removeClass('active');
$(this).addClass('active');
}
});
});
});
$(function () {
$('a[href*=#]:not([href=#])').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: (target.offset().top - 40)
}, 850);
return false;
}
}
});
});