Keep Google Map
fixed while background
s scroll

Question

I'm trying to keep a Google Map div fixed on the screen while my background, which will be composed of successive divs encapsulating content, can scroll.

I've tried wrapping the map div in another fixed div but this only makes the map div vanish.

HTML

<body>

    <div id="map" style="position: fixed;"></div>

    <div class="backdiv1">
        <div class="content">
            <h1>TITLE</h1>
        </div>
        <div class="background">
            <p>CONTENT</p>
        </div>
    </div>

    <div class="backdiv2">
        <div class="content">
            <h1>TITLE</h1>
        </div>
        <div class="background">
            <p>CONTENT</p>
        </div>
    </div>

    <div class="backdiv3"> <!--et cetera-->
</body>

CSS

html, body, #map    {
    font-family: Nobel;
    font-size: small;
    background: gray;
    height:100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

#map  {
    width: 100%;
    height: 65.85%;
    position: fixed;
    display: block;
    z-index: 10
}

.backdiv1   {
    top:0%;
    left: 0%;
    position: absolute;
    width:100%;
    height: 100%;
    background-color: black;
    z-index: 1;
}

.backdiv2   {
    top: 100%;
    left: 0%;
    position: absolute;
    width:100%;
    height: 100%;
    background-color: blue;
    z-index: 1;
}

.backdiv3    { 
    top: 200%
    left: 0%
    /*et cetera*/

Any help would be appreciated.

Gabriele Petrioli · Accepted Answer

You are right. The map API sets the position to relative on the map element.

You should wrap the map in another element (as you tried), but give it the properties you were trying to give to #map (and apply to #map just the width/height properties)

.map-position  {
    width: 100%;
    height: 65.85%;
    position: fixed;
    display: block;
    z-index: 10;
}

You should also set the top of the first div (.backdiv1) to 65.85% so it starts after the map (this way you can see it in full)

Demo at http://codepen.io/anon/pen/vOMgEV

Keep Google Map <div> fixed while background <div>s scroll

Tags:

html

css

monkeyshines

1 Answers

Gabriele Petrioli

Recent Activity

Donate For Us