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块并将其替换为{{ 1}}容器。

还有其他方法吗？

这是一个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

我知道这不是一个好的解决方案，但我只是选择使用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

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

2 个答案: