OnsenUI Ver.2の<Page />コンポーネント内でスクロール量を取得して、固定ヘッダを表示したい

Question

###前提・実現したいこと
OnsenUI Ver.2の<Page />コンポーネント内でスクロール量を取得して、固定ヘッダを表示したい

###発生している問題・エラーメッセージ
要素のスクロールが検知できず、スクロール量を取得できない。

###試したこと
react-waypointというコンポーネントを使用して実装しようと思っておりましたが、
onEnter等のメソッドが反応していませんでした。

[react-waypoint]
https://github.com/brigade/react-waypoint

OnsenUIでページ内スクロールなど、スクロール量を取得したりすることはできないのでしょうか？

よろしくお願いいたします。

Answer 1

スクロール量を取得することの是非は分からないのですが、元々は固定ヘッダを表示したいとのことで、ons-toolbarでは実現できませんでしょうか。

OnsenUIのリファレンス

※以下上記URLからの抜粋です

<ons-page id="helloworld-page">
  <ons-toolbar>
    <div class="center"></div>
    <div class="right">
      <ons-toolbar-button>
        <ons-icon icon="ion-navicon, material:md-menu"></ons-icon>  
      </ons-toolbar-button>
    </div>
  </ons-toolbar>

  <p style="text-align: center">
    <ons-button>Click me!</ons-button>
  </p>
</ons-page>

document.addEventListener('init', function(event) {
  var page = event.target;
  if (page.matches('#helloworld-page')) {
    page.querySelector('ons-toolbar .center').innerHTML = 'My app';
    page.querySelector('ons-button').onclick = function() {
      ons.notification.alert('Hello world!');
    };
  }
});