Jump to content

how to make body scroll OVER header


elmohack
 Share

Recommended Posts

Hi, im not sure how to do this so i need some advice , im trying to get contents scroll over a navigation bar ill try to show an illustration image attached. I was trying to use position fixed at the header but that doesnt help since it stays there the effect im trying to get is the body scrolling over the header , in other words making the div below another div scroll on top of that div when you scroll down. Please look at attached image.

post-94772-0-16955600-1338009761_thumb.jpg

Link to comment
Share on other sites

z-index: will only work when position: is used on the same element, therefore the position: fixed header would similar to

#header {position: fixed; z:index:0;}

and the content area would be

#content {position:relative; z-index: 10;}

which will stack the content container at a level above header level so it will scroll over the to of the header.

Link to comment
Share on other sites

Hi, i want the content to go over the header when you scroll down so the content page goes up . @ dsonesuk i tried that stll not difference apparently.. its like the usual stuff.. Ill paste my cs code here so you can verify. #header{width:100%;background:#000000;height:460px;background:url(../images/header.jpg);no-repeat;min-width:1000px;position: fixed; z-index:0;} #content {position:relative; z-index: 10;width:100%;padding-top:40px;background:#000000;height:auto;background:url(../images/wbg.jpg);min-width:1000px;} there are other divs within the content box so im sure it would work still but still not working so :s//

Link to comment
Share on other sites

Update @ dsenosuk I did as you said apparently i clicked the wrong html so there was no result but i tested again now and apparently the header is missing when i use the code u gave. and it only display the content div.

Edited by elmohack
Link to comment
Share on other sites

Update . I used position top o on the header.. but .. at the bottom of the page i have a back to top b utton.. now that doesnt work.. the button uses jquery to scroll when on click the button goes to div that is specified in this case. the div is # header .. but now it doesnt mvoe it just remains at that position anyway to fix this?

Link to comment
Share on other sites

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><style type="text/css">body {margin: 10px;}#header{/*width:100%;*/background:#000000;height:460px;background:url(../images/header.jpg);no-repeat;min-width:1000px;position: fixed; z-index:0;top:0;left: 10px;right:10px;}#content {position:relative; z-index: 10;/*width:100%; not required */margin-top:460px;background:#000000;/*height:auto; not required */background:url(../images/wbg.jpg);min-width:1000px;}</style></head><body><div id="header"> Header</div><div id="content">  <p>Ut labore et dolore magna aliqua. Ut enim ad minim veniam, excepteur sint    occaecat ut aliquip ex ea commodo consequat. Duis aute irure dolor consectetur    adipisicing elit, mollit anim id est laborum. Ullamco laboris nisi eu fugiat    nulla pariatur. Sed do eiusmod tempor incididunt in reprehenderit in voluptate    velit esse cillum dolore.</p>  <p>Excepteur sint occaecat cupidatat non proident, ut aliquip ex ea commodo    consequat. Ut enim ad minim veniam, sunt in culpa. Ut aliquip ex ea commodo    consequat.</p>  <p>Eu fugiat nulla pariatur. In reprehenderit in voluptate ut labore et dolore    magna aliqua. Cupidatat non proident, ullamco laboris nisi quis nostrud exercitation.</p>  <p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Sunt    in culpa lorem ipsum dolor sit amet, cupidatat non proident. Velit esse cillum    dolore duis aute irure dolor ullamco laboris nisi. In reprehenderit in voluptate    lorem ipsum dolor sit amet. Velit esse cillum dolore ut labore et dolore    magna aliqua.</p>  <p>Excepteur sint occaecat duis aute irure dolor qui officia deserunt. Cupidatat    non proident, ullamco laboris nisi quis nostrud exercitation. Sed do eiusmod    tempor incididunt velit esse cillum dolore ut labore et dolore magna aliqua.    Cupidatat non proident, lorem ipsum dolor sit amet, in reprehenderit in voluptate.    Ut enim ad minim veniam, sed do eiusmod tempor incididunt excepteur sint    occaecat.</p><p>Ut labore et dolore magna aliqua. Ut enim ad minim veniam, excepteur sint    occaecat ut aliquip ex ea commodo consequat. Duis aute irure dolor consectetur    adipisicing elit, mollit anim id est laborum. Ullamco laboris nisi eu fugiat    nulla pariatur. Sed do eiusmod tempor incididunt in reprehenderit in voluptate    velit esse cillum dolore.</p>  <p>Excepteur sint occaecat cupidatat non proident, ut aliquip ex ea commodo    consequat. Ut enim ad minim veniam, sunt in culpa. Ut aliquip ex ea commodo    consequat.</p>  <p>Eu fugiat nulla pariatur. In reprehenderit in voluptate ut labore et dolore    magna aliqua. Cupidatat non proident, ullamco laboris nisi quis nostrud exercitation.</p>  <p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Sunt    in culpa lorem ipsum dolor sit amet, cupidatat non proident. Velit esse cillum    dolore duis aute irure dolor ullamco laboris nisi. In reprehenderit in voluptate    lorem ipsum dolor sit amet. Velit esse cillum dolore ut labore et dolore    magna aliqua.</p>  <p>Excepteur sint occaecat duis aute irure dolor qui officia deserunt. Cupidatat    non proident, ullamco laboris nisi quis nostrud exercitation. Sed do eiusmod    tempor incididunt velit esse cillum dolore ut labore et dolore magna aliqua.    Cupidatat non proident, lorem ipsum dolor sit amet, in reprehenderit in voluptate.    Ut enim ad minim veniam, sed do eiusmod tempor incididunt excepteur sint    occaecat.</p><p>Ut labore et dolore magna aliqua. Ut enim ad minim veniam, excepteur sint    occaecat ut aliquip ex ea commodo consequat. Duis aute irure dolor consectetur    adipisicing elit, mollit anim id est laborum. Ullamco laboris nisi eu fugiat    nulla pariatur. Sed do eiusmod tempor incididunt in reprehenderit in voluptate    velit esse cillum dolore.</p>  <p>Excepteur sint occaecat cupidatat non proident, ut aliquip ex ea commodo    consequat. Ut enim ad minim veniam, sunt in culpa. Ut aliquip ex ea commodo    consequat.</p>  <p>Eu fugiat nulla pariatur. In reprehenderit in voluptate ut labore et dolore    magna aliqua. Cupidatat non proident, ullamco laboris nisi quis nostrud exercitation.</p>  <p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Sunt    in culpa lorem ipsum dolor sit amet, cupidatat non proident. Velit esse cillum    dolore duis aute irure dolor ullamco laboris nisi. In reprehenderit in voluptate    lorem ipsum dolor sit amet. Velit esse cillum dolore ut labore et dolore    magna aliqua.</p>  <p>Excepteur sint occaecat duis aute irure dolor qui officia deserunt. Cupidatat    non proident, ullamco laboris nisi quis nostrud exercitation. Sed do eiusmod    tempor incididunt velit esse cillum dolore ut labore et dolore magna aliqua.    Cupidatat non proident, lorem ipsum dolor sit amet, in reprehenderit in voluptate.    Ut enim ad minim veniam, sed do eiusmod tempor incididunt excepteur sint    occaecat.</p></div></body></html>

Link to comment
Share on other sites

yes in the previous post i commented that i manage to make it work , but my question still remains ... at the bottom of the page i have created a button and when you click it it goes to the top (back to top button) its a href # header so it scrolls up to header.. when i have z index and postion relative etc on the content box and header ... the back to top button doesnt work. it just doesnt respond.. but when i take away the codes you provided it works.

Link to comment
Share on other sites

Sorry, i thought you was still having trouble getting it to work. Because you are using position: fixed; it does not scroll out of view so using a link to take to this element top edge is not going to work because its top edge will always be at the top of the browser window. to get the top of page to work i would use another element to link to to achieve the same result.

<div id="top"> </div><div id="header"> Header</div>

#top {position:absolute; left: -99999em; top:0;}

<a href="#top">Top of page</a>

Link to comment
Share on other sites

I can't see a problem with IE8, IE7 problem is described here http://www.quirksmode.org/bugreports/archives/2007/03/ie7_positionfixed_and_margin_top_bug.html, the best way to get over this problem is to insert a outer div around #content (note: this has no styling at all), and use i7 condition to place #content in the correct position to match other better browsers.

<div id="top"> </div><div id="header"> Header</div><div id="crappy_IE7_fix"><div id="content">  <p>Ut labore et dolore magna aliqua. Ut enim ad minim veniam, excepteur sint    occaecat ut aliquip ex ea commodo consequat. Duis aute irure dolor consectetur    adipisicing elit, mollit anim id est laborum. Ullamco laboris nisi eu fugiat    nulla pariatur. Sed do eiusmod tempor incididunt in reprehenderit in voluptate    velit esse cillum dolore.</p> </div></div><a href="#top">Top of page</a>

<!--[if IE 7]><style type="text/css">#content {margin-top:450px;</style><![endif]-->

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...