Click here to Skip to main content
12,950,272 members (62,712 online)
Rate this:
Please Sign up or sign in to vote.
See more:
I have the flowing issue:

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>

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');

Am I approaching that solution the right way?
Thanks, I hope it make sense
Posted 18-Feb-13 4:54am
Updated 18-Feb-13 5:02am

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

    Print Answers RSS
Top Experts
Last 24hrsThis month
OriginalGriff 5,829
CHill60 3,460
Maciej Los 2,953
Jochen Arndt 1,975
ppolymorphe 1,820

Advertise | Privacy | Mobile
Web02 | 2.8.170525.1 | Last Updated 18 Feb 2013
Copyright © CodeProject, 1999-2017
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100