Click here to Skip to main content
15,896,730 members

Positioned fixed header and the middle part content issue

eran11 asked:

Open original thread
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:
XML
<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:
CSS
#header {    
    height: 20%;
    width: 100%;
    position: fixed;
    background: #F5F6F7;
}


'section' style(one long page separated to sections)
CSS
.section {
    top: 163px;
    height: 5000px;
    width: 100%;
    position: relative;
}


jQuery part:
PHP
$('#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
Tags: CSS, HTML, jQuery

Plain Text
ASM
ASP
ASP.NET
BASIC
BAT
C#
C++
COBOL
CoffeeScript
CSS
Dart
dbase
F#
FORTRAN
HTML
Java
Javascript
Kotlin
Lua
MIDL
MSIL
ObjectiveC
Pascal
PERL
PHP
PowerShell
Python
Razor
Ruby
Scala
Shell
SLN
SQL
Swift
T4
Terminal
TypeScript
VB
VBScript
XML
YAML

Preview



When answering a question please:
  1. Read the question carefully.
  2. Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
  3. If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
  4. Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.
Let's work to help developers, not make them feel stupid.
Please note that all posts will be submitted under the http://www.codeproject.com/info/cpol10.aspx.



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900