How do the search box stick to the toolbar in onsen-ui?

In my page I have an ons-toolbar on top and an ons-list in the page. The first list-item contains a search box, when the user scrolls down the list the search box will go up with other elements, is there any way to make the search box sticks to to the top of the page or bottom of toolbar?

Solution

Add this to your CSS file:

ons-toolbar ~ .page__content{
    margin-top: 45px;
}
.search-bar {
    width: 100%;
    position: fixed;
    display: block;
    margin-top: -45px;
}
.after-search-bar {
    margin-top: -10px;
}

Your html should look like this

<ons-page>

    <ons-toolbar>
          <!--your tool bar-->
    </ons-toolbar>
    <div class="search-bar">
        <input type="search" class="search-input" style="width: 96%; margin: 6px auto 6px auto;" placeholder="Search">    
    </div>

    <div class="after-search-bar">
        <ons-list>
            <ons-list-item>
                <!--your list items-->
            </ons-list-item>
        </ons-list>
    </div>

</ons-page>