3. position:sticky on ons-list-item

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

position:sticky on ons-list-item

  • S

    Hi, is it possible to use the position sticky css attribute within a onsen list item? So that the onsen list item stays on top of the screen when scrolling?

    <ons-list-item style="position:sticky; top:0px"></ons-list-item>

    The code above is obviously not working. Nor any similar configuration. I realized that this is not working within an ons-list.

    Rgds

    0
  • E
    administrators

    I think the problem is that sticky elements work relative to their containing element, and a list item’s containing element is the list. The list and the list item always scroll together so the list item never reaches the bounds of the list.

    That’s a starting point. Perhaps someone with more CSS wizardry than me knows how to change the containing element to the page instead of the list?

    0
  • E
    administrators

    Here’s a hacky way to do sticky list headers. That might help you get to sticky list items.

    It works because the header is outside the list, so its containing element is the page, not the list.

    https://codepen.io/anon/pen/NJpXZJ

    <style>
  .sticky {
    position: sticky;
    top: 0px;
    z-index: 9999;
    background-image: none;
  }
</style>
<ons-page>
  <ons-toolbar>
    <div class="center">Lists</div>
  </ons-toolbar>

  <ons-list-header class="sticky">header</ons-list-header>
  <ons-list>
    <ons-list-item>Item A</ons-list-item>
    <ons-list-item>Item B</ons-list-item>
    <ons-list-item>Item C</ons-list-item>
  </ons-list>
  
  <ons-list-header class="sticky">header</ons-list-header>
  <ons-list>
    <ons-list-item>Item A</ons-list-item>
    <ons-list-item>Item B</ons-list-item>
    <ons-list-item>Item C</ons-list-item>
  </ons-list>
  
  <ons-list-header class="sticky">header</ons-list-header>
  <ons-list>
    <ons-list-item>Item A</ons-list-item>
    <ons-list-item>Item B</ons-list-item>
    <ons-list-item>Item C</ons-list-item>
  </ons-list>
  
  <ons-list-header class="sticky">header</ons-list-header>
  <ons-list>
    <ons-list-item>Item A</ons-list-item>
    <ons-list-item>Item B</ons-list-item>
    <ons-list-item>Item C</ons-list-item>
  </ons-list>

  <ons-list-header class="sticky">header</ons-list-header>
  <ons-list>
    <ons-list-item>Item A</ons-list-item>
    <ons-list-item>Item B</ons-list-item>
    <ons-list-item>Item C</ons-list-item>
  </ons-list>

  <ons-list-header class="sticky">header</ons-list-header>
  <ons-list>
    <ons-list-item>Item A</ons-list-item>
    <ons-list-item>Item B</ons-list-item>
    <ons-list-item>Item C</ons-list-item>
  </ons-list>
</ons-page>
    0
  • S

    This is working indeed, thank you .-) i Can go with that

    0