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.