I'm currently in the process of designing a website where, upon clicking a navigation button, part of the page scrolls while the top header & nav bar remain fixed. Although I've managed to get the scrolling functionality to work and keep the top section in place, the main content (the scrolling part) is currently sitting behind the header & nav bar. Here's the code I have:
$(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
}, 1000);
return false;
}
}
});
});
body {
font-family: 'Open Sans', sans-serif;
}
#Navigation {
position: fixed;
left: 10%;
top: 250px;
background-color: black;
text-align: center;
color: #FFFFFF;
font-size: x-large;
height: 50px;
width: 80%;
line-height: 50px;
vertical-align: middle;
margin: 0 auto;
border-top: medium solid #FFFFFF;
}
#Navigation a:link,
a:visited {
color: #FFFFFF;
text-decoration: none;
font-size: x-large;
font-weight: 700;
}
#Navigation a:hover {
color: #B5B5B5;
text-decoration: none;
font-size: x-large;
font-weight: 700;
}
#Navigation a:active {
color: #FFFFFF;
text-decoration: none;
font-size: x-large;
font-weight: 700;
}
#Header {
position: fixed;
left: 10%;
top: 0;
height: 250px;
width: 80%;
background-color: #000000;
margin: 0 auto;
}
Image Placeholder...more content...Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ante enim, porta a commodo ac, sodales vel metus. Nulla et magna et augue sagittis volutpat. Pellentesque id est eget eros imperdiet congue et in elit. Aliquam venenatis ullamcorper leo at vehicula. Duis vel libero ipsum. Donec eu posuere quam, sit amet posuere risus. Nam malesuada urna id egestas gravida. Aliquam nec imperdiet magna. Nullam interdum, lorem ut sodales molestie, odio ex viverra nunc, vitae tempor orci sem quis ipsum. Ut semper lorem sit amet mauris tempus posuere ac et ipsum. Introduction