This is the function i use to reposition the #nav div in the middle (vertical) of the window
function RepositionNav(){
var windowHeight = $window.height(); //get the height of the window
var navHeight = $('#nav').height() / 2;
var windowCenter = (windowHeight / 2);
var newtop = windowCenter - navHeight;
$('#nav').css({"top": newtop}); //set the new top position of the navigation list
}
this is where i reposition while scrolling on the window
$window.bind('scroll', function(){ //when t开发者_开发问答he user is scrolling...
RepositionNav();
});
It works fine, but not in iphone... I mean, it disappears as users scroll down :? (stays on its original position, top)
Any idea why?
Thanks a lot
Seems silly, but make sure you do + "px" on the .css()
assignment for top
.
iPhone might handle it's window height differently. I'd output some debugging information so you can verify that the iPhone is reporting/getting the correct values.
edit 5/19/11 9:35am est
In looking at your original question, and the comments you made about the iPhone reporting 240px no matter how much you scroll..it makes sense that it'd report 240px. Your navHeight is a fixed value, and your windowHeight is a fixed value, so you will always get the same newtop
value when you subtract them. You need to take into account the scrolling offset of the page - try using the window.scrollYOffset
value in conjunction with your equation, like so:
var windowHeight = $window.height(),
navHeight = $('#nav').height() / 2,
windowCenter = (windowHeight / 2),
newTop = (windowCenter - navHeight) + window.scrollYOffset;
/* we use the scrollYOffset to normalize your newTop value to
the current top of the viewPort, based on how far the user has
scrolled down on the page.
*/
$('#nav').css({ top: newTop });
精彩评论