I have the flowing issue:
-------------------
header||||||||||||||||||
-------------------
content|||||||||||||||||
-------------------
footer||||||||||||||||||||
-------------------
The header and footer are positioned fixed.
the content part(divided to sections) is very long(each "section" is 5000px long).
I am trying to do a site with navigation that instead of post back when clicking a "page"
in the navigation and load other page.
Will only animate with jquery and 'slide' down to the requested section.
I am having trouble with the position fixed header, each time I slide to different section
,the header hiding the content(and i understand why - it's calling the page id and then go to that height, not knowing of the header) what I need to do is always set the 'top' so the content page will be under the header.
I thought that if I'll set the
position
of the class page to
relative
and set the
top
to some pixels it will be ok ( cause i thought that if I position element to absolute,fixed,relative the
top
considered to be from the widow it self), isn't it?
This is the navigation html:
<div id="header" class="shadow">
<ul id="nav">
<li><a href="#section1"></a></li>
<li><a href="#section2"></a></li>
<li><a href="#section3"></a></li>
</ul>
</div>
Header style:
#header {
height: 20%;
width: 100%;
position: fixed;
background: #F5F6F7;
}
'section' style(one long page separated to sections)
.section {
top: 163px;
height: 5000px;
width: 100%;
position: relative;
}
jQuery part:
$('#nav a').bind('click', function (event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
Am I approaching that solution the right way?
Thanks, I hope it make sense