Fixed position with ons-pull-hook component

Question

I have a button with position:fixed to stay at the same place when i scroll.

When i use the ons-pull-hook element in the same page, the button is moving with the scroller. It is no more fixed. how can I fix that ?

thanks !!!

Answer 1

It's an issue with that arises when translate3d is used on a parent element of an element with fixed position.

Please see this question: 'transform3d' not working with position: fixed children

There is not good workaround. You could remove the transform from the <div class="scroll"> element after the callback has been executed but it would still not look very nice:

$scope.load = function(done) {
  $timeout(function() {
    done();
    document.querySelector('.scroll').style.transform = '';
  }, 500);
};

http://codepen.io/argelius/pen/WvNVwE

You shouldn't put code like this in the controller in a real app. This is just an example.

Does the button need to move when the page is pulled down? Otherwise you can just put it outside the <ons-page> element and wrap the whole thing in another <ons-page> element:

<ons-page>
  <ons-button style="position: fixed; top: 80px; left: 50%; transform: translate3d(-50%, 0, 0); z-index: 2000">Button</ons-button>

  <ons-page>
    <ons-pull-hook>
      Pull down
    </ons-pull-hook>

    ...
  </ons-page>
</ons-page>

http://codepen.io/argelius/pen/NqWQbv

Answer 2

Ok, I confirm ! The page wrapped in a page works perfectly !

thanks !!

  <ons-button style="position: fixed; top: 80px; left: 50%; transform: translate3d(-50%, 0, 0); z-index: 2000">Button</ons-button>

  <ons-page>
    <ons-pull-hook>
      Pull down
    </ons-pull-hook>
    ...
  </ons-page>
</ons-page>