0

I noticed that even on iOS, Bootstrap's navbar manages to stay at the top of the window with fixed positioning. Despite the fact that I thought that this was meant to be impossible without re-implementing iOS scrolling?

I was wondering how this worked, and how I can do it for my own views? Nothing I've tried seems to work - the div gets misaligned while scrolling, and only jumps into position after scrolling ends.

EDIT: Here's a minimal(ish!) example. See how on iOS the fixedThing jumps up as you scroll down. Perhaps it's something to do with interacting with the navbar?

<html>
    <head>

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
            @import url('http://getbootstrap.com/dist/css/bootstrap.css');

            .fixedThing {
                position: fixed;
                width: 100%;
                height: 100%;
                background: red;
                opacity: 0.5;
            }

            .navbar {
                width: 100%;
            }
        </style>

        <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>

    </head>
    <body>

        <div class="navbar navbar-inverse navbar-fixed-top">

        </div>

        <div class="fixedThing"></div>

        <p>...insert lots of page content so it scrolls ...</p>

    </body>
</html>

http://jsfiddle.net/D5cZj/

Alexander Scholz
  • 2,100
  • 1
  • 20
  • 35
Joseph Humfrey
  • 2,974
  • 2
  • 23
  • 34

1 Answers1

2

Since iOS 5 position: fixed is supported: http://caniuse.com/#search=fixed

If you want further help you have to show us, what you already have tried.

Edit:

The problem is, that first you move the whole page, until the browser navbar is no longer visible and then you start to move the content in the paragraph.

To prevent this problem you can try window.scrollTo(0, 1); How to completely hide the navigation bar in iPhone / HTML5

But the problem will appear again when the user scrolls to the top (so the navbar is visble) and then back down..

Edit 2:

If you change your css to:

body {
    height: 100%;
    overflow: scroll;
}

.fixedThing {
    position: fixed;
    width: 100%;
    height: 150%;
    background: red;
    opacity: 0.5;
}

.navbar {
    width: 100%;
}

it would improve the problem.

Community
  • 1
  • 1
Alexander Scholz
  • 2,100
  • 1
  • 20
  • 35
  • Okay, added an example to the original post! – Joseph Humfrey Aug 12 '13 at 07:42
  • Thanks, I was planning on implementing the URL-bar hiding thing anyway, thanks for the link! I came up with the same solution of simply extending the height too... slightly ugly but mostly works. I still don't understand how bootstrap's navbar works perfectly though...?! – Joseph Humfrey Aug 12 '13 at 15:13
  • Well, the problem is not the positioning but the height. Your element has a height of 100% but the height of the browser changes while the navbar disappears. – Alexander Scholz Aug 12 '13 at 16:46