CSS Position Fixed

ionic-v1
1

Hey All,

I’m trying to get an element to keep a fixed position while scrolling the content, but position:fixed; doesn’t work at all.

I’ve seen some other posts about this in the forums but there doesn’t seem to be a clear fix for this. Any thoughts?

2

The ion-scroller is based on the zynga scroller, which really just movies content inside the scroller. Technically, it’s not scrolling, but just moving the content inside. That being said, css positioning fixed won’t work, you may have to use position: absolute;

What are you trying to achieve?

3

I’m trying to get an element to remain static at the top of the screen below the header (same effect on the facebook app used to prompt the user that there are new items in the feed).

Edit: is it possible to detect what position the user is within the scroller so I could set the position of the element to that?

4

Well if its a facebook-like feed, you could always just scroll to the top. But to get the position of something with in a scroller, you can use the .getScrollPosition() method. Note that this only works in the nightly builds thought

http://ionicframework.com/docs/nightly/api/service/$ionicScrollDelegate/

5

Hi Boffy. If I’m understanding your question correctly, I think the solution is to put your fixed element outside of the scrolling content container. Something along these lines.

<ion-view class="wrapper">

    <div class="bar bar-header">
        fixed stuff goes here
    </div>

    <ion-content scroll="true" class="has-header">
        scrolling stuff goes here
    </ion-content>

</ion-view>
13 Likes
6

@udi Perfect! Such a simple solution which worked perfectly!

7

@udi I have to second that! Simple, elegant solution that somehow completely escaped me.

8

try this simple tutorial on CSS Positioning

Zene

9

Hi use two ion-content directive, one u set scroll=false and the other one scroll=true… try this:

<ion-content scroll="false">
	<div class="bar bar-header">
				  <h2 class="title">FIXED</h2>
	</div>
</ion-content>
<ion-content scroll="true">
	<div class="bar bar-header">
				  <h2 class="title">Sub Header</h2>
	</div>
</ion-content>
3 Likes
11

How can i do this in Ionic 2?
<ion-fixed
<ion-content scroll="false"
both not working

1 Like
12

I’m trying to leave an element in a fixed position like the whatsapp chat background

13

For Ionic2

You can use the ion-fixed property for any element directly below the ion-content tag. For example:

<ion-content>

  <div id="div1" ion-fixed>
  </div>

  <div id="div2">
  </div>
</div>

div1 will be positioned in the fixed content section and is therefor not scrollable. The second div (div2) is scrollable.

3 Likes
14

I’ve stumbled upon this post, and I know that it’s years later but I had this issue recently where I couldn’t use position: fixed to make anything sticky.

So go to global.scss and simply place this:

.ion-page{
contain: initial;
}

This was very simple and fixed the issue instantly for me. I also have overflow-y: scroll on ion-page.