0

I am making a sticky header that works on a touch screen, using hammer.js for touch gestures:

    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>

The header remains sticky while dragging on the screen, the problem is the header disapears when the finger is released from the screen and swipe scrolling the page, then the header apears again after the scrolling is stopped. (This is only tested on iphone 4s/5).

So the function only understands the drag performance but not when the finger is released from the screen, any help is appreciated!

nihulus
  • 1,475
  • 4
  • 24
  • 46
  • Why are you setting `position: fixed` while dragging? Or are you changing it anywhere? You can write it in css file(or – Ikrom May 19 '13 at 19:20
  • @bob ty for reply, well the problem remains still that header disapears when finger is released from the screen – nihulus May 20 '13 at 06:01

0 Answers0