how do i re-position fixed Header & Footer?

问题

I have got some issues when using fixed Header & Footer, But some suggest on me to use Position: Absolute instead of Fixed and re-position Header and footer when scroll using JavaScript Code, Does any one know how to do this? Or this issue faced him.

Any suggestion would be helpful.

Best Regards.

回答1:

Ahmed, I just came over here from the other thread we had been discussing. Your question isn't clear enough for the other folks to answer. Your question should include the fact that you need to trigger the javascript function to reposition on a specific event.

One way you could do this is this: Change the elments to absolute position instead of fixed. Don't use fixed at all. Then make the javacript function for positioning elements fire every time the browser window scrolls or finishes scrolling. By doing it this way, the elements will always be moved into view after user finishes scrolling. They will actually pop into view which will look ugly. To make them smoothly move into view, you'll have to extend it further by using css3 transistions OR interpolating the position gradually with javascript. On iOS5 and iOS6, you should be able to use css3 transitions just fine. They would be VERY easy to implement. CSS3 transitions make javascript controlled animations a piece of cake.

The hard part will be implementing the javascript to compute the element positions and then fire the event after the browser finishes scrolling.

Hopefully some other folks can chime in if I've got the right direction.

Vote me up, bro. :)

回答2:

See if the code below helps (notice how the margin adjustments use negative values that are half the size of the div that is being positioned):

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>align</title>
<style type="text/css">
body {
    margin: 0px;
    padding: 0px;
}
#text_center {
    text-align: center;
    width: 200px;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-20px;
}
#text_bottom {
    text-align: center;
    width: 200px;
    position:absolute;
    left:50%;
    bottom:1%;
    margin-left:-100px;
}
</style>
</head>
<body>
    <div id="text_center">Text 1</div>
    <div id="text_bottom">Text 2</div>
</body>
</html>

来源：https://stackoverflow.com/questions/14039317/how-do-i-re-position-fixed-header-footer

标签

javascript

ios

css3

cordova

jquery-mobile