如何在 Ionic 框架中启用粘性菜单？

Question

我有一个视图，我需要在 Ionic framework 内实现一个粘性菜单。

寻找 Angular 而不是 jQuery 的解决方案我找到了 ngSticky。伟大的图书馆完美无缺，但问题是它无法在 Ionic 指令 <ion-content> 中工作。

我问了一个previous question about it here，然后搞清楚是怎么回事：

---

因为ion-content创建的父容器上面有如下样式：

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

这是对iPad scrolling bug as described here 的修复。

所以我不能删除该样式，删除它会涉及到对核心 ionic.bundle.js 文件进行更改。

我现在唯一能想到的就是编写一些代码来检测粘性标题何时到达顶部，然后从ion-content 中删除该 HTML 块并将其替换为 ion-content 容器上方.

有没有其他办法解决这个问题？

这是一个 Plunker http://plnkr.co/edit/DiVfOzjJevSFOtVitYty?p=preview 有一个 jQuery hack 可以删除样式标签，因此您可以看到它应该如何工作。

Answer 1

我想创造类似的东西。

我在顶部有一个图像，在下面有一个按钮。当我向下滚动页面时，我希望按钮保持在顶部。

（粘性菜单 === 粘性按钮 === 都一样）

下面的代码运行不可靠并且充满了黑客，所以我很犹豫要分享它...事实上我已经从代码库中删除了它，在这里发布是为了说明性目的仅：

  // 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": ""});
    }
  };

然后在视图中：<ion-content on-scroll="fixButtonToTop">

---

不仅代码很糟糕，而且我还犯了这里描述的常见错误之一：https://www.toptal.com/ionic/most-common-ionic-development-mistakes

常见错误 #8：将事件绑定到 onscroll，而忘记了 requestAnimationFrame

Answer 2

我知道这不是一个好的解决方案，但我只是去应用带有 !important 的 CSS 规则来覆盖当前样式

.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