# Fix header on grid layout **URL:** \ **Category:** ionic-v1\ **Created:** [June 25, 2014, 12:56pm UTC](https://forum.ionicframework.com/t/fix-header-on-grid-layout/6071 "2014-06-25T12:56:19Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![charmi](https://avatars.discourse-cdn.com/v4/letter/c/ecd19e/32.png) [@charmi](https://forum.ionicframework.com/u/charmi)\ **Post date:** [June 25, 2014, 12:56pm UTC](https://forum.ionicframework.com/t/fix-header-on-grid-layout/6071/1 "2014-06-25T12:56:20Z")
I want to fix the header of my grid on ionic for iPad app. I don’t want to scroll the header. I would be grateful for some quick solution. Please help. ---
**Author:** ![mhartington](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/mhartington/32/137757_2.png) [@mhartington](https://forum.ionicframework.com/u/mhartington)\ **Post date:** [June 25, 2014, 12:58pm UTC](https://forum.ionicframework.com/t/fix-header-on-grid-layout/6071/2 "2014-06-25T12:58:31Z")
Ion-header shouldn’t be scrolling. Can you post an example of what you have? ---
**Author:** ![charmi](https://avatars.discourse-cdn.com/v4/letter/c/ecd19e/32.png) [@charmi](https://forum.ionicframework.com/u/charmi)\ **Post date:** [June 25, 2014, 1:08pm UTC](https://forum.ionicframework.com/t/fix-header-on-grid-layout/6071/3 "2014-06-25T13:08:42Z")
Header and sub-header are already there in my app. But I want to fix content on list as header of table. ![](https://sea1.discourse-cdn.com/ionicframework/uploads/default/1078/7cecd92664b1f215.png) Here in this image I want to fix Header (Value / Cost…) ---
**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\ **Post date:** [June 25, 2014, 1:37pm UTC](https://forum.ionicframework.com/t/fix-header-on-grid-layout/6071/4 "2014-06-25T13:37:44Z")
Hey you can try ion-scroll for that. But your table head on top of your ion-content. Then add a ion-scroll container with y-scrolling. [http://ionicframework.com/docs/api/directive/ionScroll/](http://ionicframework.com/docs/api/directive/ionScroll/) Greetz, bengtler ---
**Author:** ![charmi](https://avatars.discourse-cdn.com/v4/letter/c/ecd19e/32.png) [@charmi](https://forum.ionicframework.com/u/charmi)\ **Post date:** [June 26, 2014, 9:54am UTC](https://forum.ionicframework.com/t/fix-header-on-grid-layout/6071/5 "2014-06-26T09:54:40Z")
Thanks for the quick solution. Using ion-content and ion-scroll, I get the header fixed but introducing one new problem of scrolling. Now when I am scrolling the items(data) towards the bottom of the list,its automatically scroll up (bouncing back to the top item) and I am not able to view my items(data) at bottom. I think,there must be some solution for this issue but I could not get it. Please help. ---
**Author:** ![charmi](https://avatars.discourse-cdn.com/v4/letter/c/ecd19e/32.png) [@charmi](https://forum.ionicframework.com/u/charmi)\ **Post date:** [June 26, 2014, 10:38am UTC](https://forum.ionicframework.com/t/fix-header-on-grid-layout/6071/6 "2014-06-26T10:38:10Z")
Please check above issue on plnkr. I have listed items Cowbell1 to Cowbell22. You can not scroll to bottom of the list and can’t view the last item Cowbell22. > **[Plunker](http://plnkr.co/edit/RaIJ7mkUlTkqsDNwF0tz?p=preview)** > > Created on Plnkr: Helping developers build the web. ---
**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\ **Post date:** [June 26, 2014, 12:41pm UTC](https://forum.ionicframework.com/t/fix-header-on-grid-layout/6071/7 "2014-06-26T12:41:58Z")
Your domstructure is wrong. Take a look here how to structure an app with navbar [http://ionicframework.com/docs/api/directive/ionNavBar/](http://ionicframework.com/docs/api/directive/ionNavBar/) ``` // your headerbar stuff ``` ---
**Author:** ![charmi](https://avatars.discourse-cdn.com/v4/letter/c/ecd19e/32.png) [@charmi](https://forum.ionicframework.com/u/charmi)\ **Post date:** [June 26, 2014, 1:11pm UTC](https://forum.ionicframework.com/t/fix-header-on-grid-layout/6071/8 "2014-06-26T13:11:19Z")
Yes this is fine. But doing this change, my issue is not resolved. My issue is regarding scrolling the items inside ion-content. And as I have posted before, header and sub-header are already there in my app as displayed on above image. Now I have put table header on top of the ion-content and list data inside ion-scroll and get the scrolling issue as posted on plnkr. ---
**Author:** ![charmi](https://avatars.discourse-cdn.com/v4/letter/c/ecd19e/32.png) [@charmi](https://forum.ionicframework.com/u/charmi)\ **Post date:** [June 27, 2014, 11:00am UTC](https://forum.ionicframework.com/t/fix-header-on-grid-layout/6071/9 "2014-06-27T11:00:31Z")
Has anyone found the solution of my problem? I need this urgently. Please help!!! ---
**Author:** ![nbussman](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/nbussman/32/71252_2.png) [@nbussman](https://forum.ionicframework.com/u/nbussman)\ **Post date:** [December 15, 2014, 12:04pm UTC](https://forum.ionicframework.com/t/fix-header-on-grid-layout/6071/10 "2014-12-15T12:04:25Z")
I solved it by adding `on-scroll="scroll()"` and `delegate-handle="scrollItem"` to my `ion-content` (or your scroll view) the scroll function inside the controller uses jquery: ``` $scope.scroll = function (){ $("#schueler_overview_header").css("-webkit-transform" ,"translate3d(0px, "+$ionicScrollDelegate.$getByHandle('scrollItem').getScrollPosition().top +"px, 0px)"); $("#schueler_overview_header").css("transform" ,"translate3d(0px, "+$ionicScrollDelegate.$getByHandle('scrollItem').getScrollPosition().top+"px, 0px)"); ``` }; where `#schueler_overview_header` is the sticky element. Hope that helps you, though it is a bit dirty.