How to scroll a div behind a Map?


#1

Hello !

I’m very new to Ionic and has for now I was able to find answers to all my questions on this forum, but I have a problem that I don’t know how to solve :

How can I scroll a div behind a map (Google) ?

I’m using the sidemenu and I have a template map.html.

I’m trying to make the cards to “climb” behind the map when I’m scrolling down, while the map stays fixed at the top under the header.

Here is the code of the map template.


          <div class="item item-text-wrap">
             This is a Ionic card with item-text-wrap class. 1
          </div>
          <div class="item item-text-wrap">
             This is a Ionic card with item-text-wrap class. 2
          </div>
          <div class="item item-text-wrap">
             This is a Ionic card with item-text-wrap class. 3
          </div>
          <div class="item item-text-wrap">
             This is a Ionic card with item-text-wrap class. 4
          </div>
          <div class="item item-text-wrap">
             This is a Ionic card with item-text-wrap class. 5
          </div>
          <div class="item item-text-wrap">
             This is a Ionic card with item-text-wrap class. 6
          </div>
          <div class="item item-text-wrap">
             This is a Ionic card with item-text-wrap class. 7
          </div>
          <div class="item item-text-wrap">
             This is a Ionic card with item-text-wrap class. 8
          </div>

</ion-content>

Here is my (very, very) light css :

.scroll {
height: 100%;
}

#map {
width: 100%;
height: 50%;
}`

I’ve tried to mimic the code presented here : http://codepen.io/anon/pen/emNrOm but it doesn’t seems to work the cards are stuck under the map. (There is a little wiggle room about 1 or 2 px, but not much more).

I’ve tried to play with the different CSS position properties but I seem to make it worse than better :wink:

Hope that someone will be able to help me !

Thanks in advance,

Nainboit.