Fix header on grid layout


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.


Ion-header shouldn’t be scrolling. Can you post an example of what you have?


Header and sub-header are already there in my app. But I want to fix content on list as header of table.

Here in this image I want to fix Header (Value / Cost…)


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.

Greetz, bengtler


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.


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.


Your domstructure is wrong.

Take a look here how to structure an app with navbar

    // your headerbar stuff


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.


Has anyone found the solution of my problem? I need this urgently. Please help!!!


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.