# Scroll then fix content

**URL:** <https://forum.ionicframework.com/t/scroll-then-fix-content/15152>\
**Category:** ionic-v1\
**Created:** [January 6, 2015, 10:54am UTC](https://forum.ionicframework.com/t/scroll-then-fix-content/15152 "2015-01-06T10:54:21Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![JerryBels](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jerrybels/32/7502_2.png) [@JerryBels](https://forum.ionicframework.com/u/JerryBels)\
**Post date:** [January 6, 2015, 10:54am UTC](https://forum.ionicframework.com/t/scroll-then-fix-content/15152/1 "2015-01-06T10:54:21Z")

</div>

Hello guys,

I need to set an element in the middle of the page, that scrolls with the page, and fix itself when reaching the header. Similar to what is demonstrated here : [Scroll-Then-Fix Content | CSS-Tricks - CSS-Tricks](http://css-tricks.com/scroll-fix-content/)

So, I discovered that translate3D breaks the position:fixed css…

There is a solution here : [CSS Position Fixed](http://forum.ionicframework.com/t/css-position-fixed/2969/5):

> [@CSS Position Fixed](https://forum.ionicframework.com/t/css-position-fixed/2969/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.
> 
> ```
> &lt;ion-view class="wrapper"&gt;
> 
> &lt;div class="bar bar-header"&gt;
> fixed stuff goes here
> &lt;/div&gt;
> 
> &lt;ion-content scroll="true" class="has-header"&gt;
> scrolling stuff goes here
> &lt;/ion-content&gt;
> 
> &lt;/ion-view&gt;
> 
> ```

But as you would understand I can’t do that, since I need the element to scroll until it reaches the header.

I tried applying overflow-scroll=“true” to the content. It works if adding

```
overflow-scroll .scroll {
    transform: translate(0, 0);
}

```

But I lost a lot in functionnalities (related to scrolling for example). Then I need to create a new binding to the scroll element, etc…

Here is a Codepen to play with ( I learned my lesson @mhartington 😉 ) : [http://codepen.io/JerryBels/pen/pvNGMm](http://codepen.io/JerryBels/pen/pvNGMm)

Thanks !

---

<div class="post-metadata">

**Author:** ![JerryBels](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jerrybels/32/7502_2.png) [@JerryBels](https://forum.ionicframework.com/u/JerryBels)\
**Post date:** [January 6, 2015, 3:08pm UTC](https://forum.ionicframework.com/t/scroll-then-fix-content/15152/2 "2015-01-06T15:08:36Z")

</div>

I have found something that I could use : [http://codepen.io/anon/pen/LpCyg](http://codepen.io/anon/pen/LpCyg)

Will come back with the answer if I manage to get it or with more questions… 😛

---

<div class="post-metadata">

**Author:** ![JerryBels](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/jerrybels/32/7502_2.png) [@JerryBels](https://forum.ionicframework.com/u/JerryBels)\
**Post date:** [January 6, 2015, 3:42pm UTC](https://forum.ionicframework.com/t/scroll-then-fix-content/15152/3 "2015-01-06T15:42:41Z")

</div>

Okay, I found a solution that works perfectly ! I updated the codepen with it : [http://codepen.io/JerryBels/pen/pvNGMm](http://codepen.io/JerryBels/pen/pvNGMm)

Not sure what is better, performance wise, though. It runs perfectly on my Nexus 5 at least.

Hope it helps someone !