position:fixed in Windows Phone 7

Question

I'm trying to create a PhoneGap Windows Phone 7 application. In order to imitate an Application bar that should always be visible at the left side of the screen in landscape orientation, I wanted to place a <div> with CSS as position:fixed. This does not work, however, because the IE on WP7 seems not to support it.

Does anyone have an idea how I can display such an Application bar without having position:fixed available?

Thanks in advance

Answer 1

I was also hanging on this problem. It really seems not to be possible to create a fixed element and to position elements after every scroll looks even worse (try the jquery mobile online examples on your phone they do it this way).

I "solved" the problem by using a div container for my non fixed content with style="overflow: scroll" and fixed size. This worked for me. But scrolling in this container doesn't look like native scrolling.

Hope that helps

Answer 2

I've managed to solve the problem on my Win phone 8 (Lumia 930).

I have a modal window and when opened on mobile should stay in view point and scroll inside. Android and iphone worked fine with position fixed but win phone didn't.

My solution was to put active class on html when the modal is active and add this to css:

html.modal_active{
  overflow-y: hidden;-webkit-overflow-scrolling:touch; position: absolute; height: 100%; width: 100%;
  body{overflow-y: hidden;-webkit-overflow-scrolling:touch; position: absolute; height: 100%; width: 100%;}
}

This positioning html and body to absolute when modal is opened solved the problem. Hope it helped!