Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS HTML jQuery
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
Posted 18-Feb-13 5:54am
eran11341
Edited 18-Feb-13 6:02am
v2

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

  Print Answers RSS
0 OriginalGriff 5,130
1 DamithSL 4,237
2 Maciej Los 3,700
3 Kornfeld Eliyahu Peter 3,470
4 Sergey Alexandrovich Kryukov 2,846


Advertise | Privacy | Mobile
Web04 | 2.8.141216.1 | Last Updated 18 Feb 2013
Copyright © CodeProject, 1999-2014
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