How to enable a sticky menu within the Ionic framework?

Question

I have a view where I need to implement a sticky menu inside of the Ionic framework.

Looking for an Angular not jQuery solution I found ngSticky. Great library works perfect, the problem however is that it won't work inside of the Ionic directive <ion-content>.

I asked a previous question about it here, and then figured out what was going on:

---

Because the parent container that ion-content creates has the following style on it:

<div class="scroll" style="transform: translate3d(0px, 0px, 0px) scale(1);">

It's a fix for an iPad scrolling bug as described here.

So I can't remove that style and removing it would involve making changes to the core ionic.bundle.js file anyways.

The only thing I can think of now at the moment, is to write some code to detect when the sticky header hits the top, then remove that block of HTML out of ion-content and replace it above the ion-content container.

Is there any other way around this?

Here is a Plunker http://plnkr.co/edit/DiVfOzjJevSFOtVitYty?p=preview There is a jQuery hack in place that removes the style tag so you can see how it should work.

Answer 1

I wanted to create something similar.

I had an image on top and a button below. As I'm scrolling down the page I wanted the button to stay on top.

(sticky menu === sticky button === all the same)

Code below isn't working reliably and is full of hacks so I'm hesitant to share it... In fact I've actually removed it from the codebase, posting here for illustrational purposes only:

  // INITIALISATION SETUP 
  var $button = $(".button-middle-wrapper");
  var buttonOffset;

  var _measureOffset = function() {
    buttonOffset = $button.offset().top;
  };

  setTimeout(_measureOffset, 500); // HACK: during initialisation image is not loaded - therefore image offset is not correct - wait for image to load?

  $(window).resize(_measureOffset);

  // METHOD AVAILABLE ON THE SCOPE
  $scope.fixButtonToTop = function() {
    var scrollPosition = $ionicScrollDelegate.getScrollPosition().top;

    if (scrollPosition > buttonOffset - 30) {
      $button.css({"top": scrollPosition + 30}); // normally it is enough to set position to "fixed" - in Ionic case we do not scroll browser window - we do tranlations and setting positions - so we manually calculate position
    } else {
      $button.css({"top": ""});
    }
  };

And then in the view: <ion-content on-scroll="fixButtonToTop">

---

Not only the code is terrible but I've also committed one of the common mistakes described here: https://www.toptal.com/ionic/most-common-ionic-development-mistakes

Common Mistake #8: Binding Events to onscroll, and Forgetting About requestAnimationFrame

Answer 2

I know its not a good solution, but I'd simply go for applying CSS rule with !important to override the current style

.pane {
   transform: none !important;
   -webkit-transform: none; /* Safari and Chrome */
   -moz-transform: none; /* Firefox */
   -ms-transform: none; /* IE 9 */
   -o-transform: none; /* Opera */
}

Plunkr Here