CODEWITHSUNDEEP
jqueryhtmlcssmobile
John
John

Reputation: 1797

Fixed header ends up in the middle of the page when scrolling (samsung galaxy s3)

I am working on a html/css mobile project. I am NOT using jQuery Mobile.

I have a fixed header at the top of the page. However on the Samsung Galaxy S3, when I have a page with lots of content that scrolls off the screen, when i scroll the header ends up moving into the middle of the screen.

So as i scroll the header moves and then stays in the middle of the screen and doesnt move back up! Its fine in iPhone etc. My code:

.headerTop {
   z-index: 9;
   position: fixed;
   width: 100%;
   background-color: #fff;
   height: 60px;}

Is there any way around this? Can this be fixed with css or does it need jQuery or something fancy to get around it?

Upvotes: 1

Views: 511

Answers (3)

Dipen Dedania
Dipen Dedania

Reputation: 1450

.headerTop{ top:0 } will definitely solve your problem

Upvotes: 0

Abdul Malik
Abdul Malik

Reputation: 2642

add this to your css .headerTop{top:0;}

Upvotes: 0

Danield
Danield

Reputation: 125473

Try adding

top:0

to your css class .headerTop

Upvotes: 4

Related Questions