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

Question

我有一个 View ，需要在 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 block 。并将其替换为 ion-content 上方容器。

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

这是一个笨蛋 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": ""});
    }
  };

然后在 View 中:<ion-content on-scroll="fixButtonToTop">

<小时/>

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

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