position: fixed doesn't work on iPad and iPhone

后端未结

关注

 15  1883

I have been struggling with fixed positioning in iPad for a while. I know iScroll and it does not always seem to work (even in their demo). I also know that Sencha has a fix

相关标签:

15条回答

小蘑菇

2020-11-22 16:39
This might not be applicable to all scenarios, but I found that the position: sticky (same thing with position: fixed) only works on old iPhones when the scrolling container is not the body, but inside something else.

Example pseudo html:
```
body                         <- scrollbar
   relative div
       sticky div
```
The sticky div will be sticky on desktop browsers, but with certain devices, tested with: Chromium: dev tools: device emultation: iPhone 6/7/8, and with Android 4 Firefox, it will not.

What will work, however, is
```
body
    div overflow=auto       <- scrollbar
        relative div
            sticky div
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
清歌不尽

2020-11-22 16:39
here is my solution to this...

CSS
```
#bgimg_top {
    background: url(images/bg.jpg) no-repeat 50% 0%; 
    position: fixed; 
    top:0; 
    left: 0; 
    right:0 ; 
    bottom:0;
}
```
HTML
```
<body>
<div id="bgimg_top"></div>
....
</body>
```
Explanation is that position fixed for the div will keep the div on the background at all time, then we stretch the div to go on all corners of the browser (provided the body margin = 0) using the (left,right,top,bottom) simultaneously.

Please make sure you do not use the width and height as this will override the top,left,right,bottom options.
0 讨论(0)
发布评论:

提交评论
- 加载中...

陌清茗

2020-11-22 16:41

using jquery i am able to come up with this. it doesnt scroll smooth, but it does the trick. you can scroll down, and the fixed div pops up on top.

THE CSS

<style type="text/css">
    .btn_cardDetailsPg {height:5px !important;margin-top:-20px;}
    html, body {overflow-x:hidden;overflow-y:auto;}
    #lockDiv {
  background-color: #fff;
  color: #000;
  float:left;
  -moz-box-shadow: 0px 4px 2px 2px #ccc;-webkit-box-shadow: 0px 4px 2px 2px #ccc;box-shadow:0px 4px 2px 2px #ccc;
  }
#lockDiv.stick {
  position: fixed;
  top: 0;
  z-index: 10000;
  margin-left:0px;
  }
</style>

THE HTML

<div id="lockSticky"></div>
<div id="lockDiv">fooo</div>

THE jQUERY

<script type="text/javascript">
    function sticky_relocate() {
        var window_top = $(window).scrollTop();
        var div_top = $('#lockSticky').offset().top;
        if (window_top > div_top)
            $('#lockDiv').addClass('stick')
        else
            $('#lockDiv').removeClass('stick');
    }
    $(function() {
        $(window).scroll(sticky_relocate);
        sticky_relocate();
    });
</script>

Finally we want to determine if the ipod touch in landscape or portrait mode to display accordingly

<script type="text/javascript">
    if (navigator.userAgent.match(/like Mac OS X/i)) {
        window.onscroll = function() {

        if (window.innerWidth > window.innerHeight) {
            //alert("landscape [ ]");
            document.getElementById('lockDiv').style.top =
            (window.pageYOffset + window.innerHeight - 268) + 'px';
        }

        if (window.innerHeight > window.innerWidth) {
            //alert("portrait ||");
            document.getElementById('lockDiv').style.top =
            (window.pageYOffset + window.innerHeight - 418) + 'px';
        }
        };
    }
</script>

0 讨论(0)

夕颜

2020-11-22 16:42

In my case, it was because the fixed element was being shown by using an animation. As stated in this link:

in Safari 9.1, having a position:fixed-element inside an animated element, may cause the position:fixed-element to not appear.

0 讨论(0)
发布评论:

提交评论
- 加载中...
孤城傲影

2020-11-22 16:43

Fixed positioning doesn't work on iOS like it does on computers.

Imagine you have a sheet of paper (the webpage) under a magnifying glass(the viewport), if you move the magnifying glass and your eye, you see a different part of the page. This is how iOS works.

Now there is a sheet of clear plastic with a word on it, this sheet of plastic stays stationary no matter what (the position:fixed elements). So when you move the magnifying glass the fixed element appears to move.

Alternatively, instead of moving the magnifying glass, you move the paper (the webpage), keeping the sheet of plastic and magnifying glass still. In this case the word on the sheet of plastic will appear to stay fixed, and the rest of the content will appear to move (because it actually is) This is a traditional desktop browser.

So in iOS the viewport moves, in a traditional browser the webpage moves. In both cases the fixed elements stay still in reality; although on iOS the fixed elements appear to move.

The way to get around this, is to follow the last few paragraphs in this article

(basically disable scrolling altogether, have the content in a separate scrollable div (see the blue box at the top of the linked article), and the fixed element positioned absolutely)

"position:fixed" now works as you'd expect in iOS5.

0 讨论(0)
发布评论:

提交评论
- 加载中...
[愿得一人]

2020-11-22 16:46

Avoid on the same box using transform:--- and position:fixed. Element will stay in position:static if there is any transform.

0 讨论(0)
发布评论:

提交评论
- 加载中...