javascript - モバイル ブラウザのスティッキー ヘッダー

Question

タッチ ジェスチャにhammer.jsを使用して、タッチ スクリーンで動作するスティッキー ヘッダーを作成しています。

    scrollEvent: function () {
        Hammer('.desktop', {
            drag_block_horizontal: true,
            drag_lock_to_axis: true,
            release: false
        }).on("drag", function (event) {
            $('#steg1').css({ position: "fixed" });
        });            
    },

HTML:

<div class="desktop" id="desk1">
   <ul>
      <li>
          <strong id="steg1">Steg1</strong>                                                               
      </li>
      <li>
          <strong>Steg2</strong>
      </li>
    </ul>                                     
  </div>  

画面上でドラッグしている間、ヘッダーは固定されたままです。問題は、指を画面から離し、ページをスワイプしてスクロールするとヘッダーが消え、スクロールが停止した後にヘッダーが再び表示されることです。(これは iphone 4s/5 でのみテストされています)。

そのため、関数はドラッグのパフォーマンスのみを認識し、指が画面から離されたときは認識しません。