Ionic sticky element inside scrollable content

Question

I am trying to make a sticky element in ionic but not sure how to achieve this. I have a back arrow that I would like to have in a fixed position. This is my html:

<ion-content>
    <div class="back-arrow">
      <a class="button button-icon icon ion-chevron-left" ui-sref="main.front">
      </a>
    </div>

...rest of the code...

</ion-content>

And this is my css:

.back-arrow {
  width: 100%;
  height: 48px;
  position: absolute;
  top:0;
  z-index: 1;
}

To make it clearer. When I have:

<div class="back-arrow">
          <a class="button button-icon icon ion-chevron-left" ui-sref="main.front">
          </a>
        </div>
<ion-content>
  ...rest of the code...   
</ion-content>

Then it is working, but when it is inside ion-content it is not sticky, and I need it inside of content.

Answer 1

I just learn that you can not set a fixed element relative to it's parent, unless its the body. You can however solve this with javascript in two ways. One way is to get your offset of the container and then calculate where your fixed element has to be set in your document to show up over your countainer. This can however be a little bit tricky with the scroll that I'm not sure is same width in all browsers.

The other solution is to have your fixed element to be positioned absolute in your countainer and then via javascript find out the scroll position. From that you update your absolute element on scroll event to be your set px from top of the countainer. The container needs to be set as position relative. With this the scrollbar is not a problem.

The first solution I find best if you dont need a sticky header as you dont need to run code on every scroll event. I would set the position on resize event and trigger that event from document ready event. Also you might wanna consider using a smart resize function, but that is another topic.

Here is the first solution using jquery: https://jsfiddle.net/y842v5j8/3/

html

<div data-container>
  <span data-sticky>sticky</span>
  <p>
    Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>
  </p>
</div>

css

html,body{
  margin:0;
}

div{
  position:relative;
  width:200px;
  height:200px;
  display:block;
  padding:40px 5px;
  margin:50px auto;
  overflow-y:scroll;
  background:#ddd;
  border:1px solid #000;
}
div span{
  position:fixed;
  top:-100px;
  left:-100px;
  background:#fff;
  background:#ccc;
  padding:5px;
  border:1px solid #000;
  margin:20px 0 0 -20px; /* set this to get it from top right */
}

jquery

$(document).ready(function(){
    $(window).resize(function(){
    $('[data-sticky]').css({
        left: ($('[data-container]').offset().left + $('[data-container]').outerWidth()) - $('[data-sticky]').outerWidth()+'px',
      top: $('[data-container]').offset().top+'px'
    });
  });
  $(window).resize();
});

---

Here is the second solution using jquery: https://jsfiddle.net/y842v5j8/5/

html

 <div data-container> <span data-sticky>sticky</span> <p> Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br>Endless content goes here<br> </p> </div> 

css

 html,body{ margin:0; } div{ position:relative; width:200px; height:200px; display:block; padding:40px 5px; margin:50px auto; overflow-y:scroll; background:#ddd; border:1px solid #000; } div span{ position:absolute; top:0; right:0; background:#fff; background:#ccc; padding:5px; border:1px solid #000; margin:20px 20px 0 0; /* set this to get it from top right */ } 

jquery

 $(document).ready(function(){ $('[data-container]').scroll(function(){ $('[data-sticky]').css( 'top', $(this).scrollTop()+'px' ); }); $('[data-container]').scroll(); }); 

Answer 2

Override display: block in ion-item-sliding

ion-item-sliding {
    display: initial;
}