how to use core-scroll-threshold in core-scroll-header-panel?

[Peng Kim]

 

    #scrollpanel{
      border: 1px solid blue;
      height:100%;
    }
    .contentcontainer {
      margin:60px 0;
      border: 1px solid red;


    }

   <core-scroll-threshold id="threshold" scrollTarget="{{$.scrollpanel}}" lowerThreshold="10" on-lower-trigger="{{loadMore}}" fit></core-scroll-threshold>
    <core-scroll-header-panel id="scrollpanel" condenses="true" keepCondensedHeader scrollAwayTopbar="false">
      <!-- toolbar -->
      <core-toolbar class="tall">
        <paper-icon-button icon="arrow-back"></paper-icon-button>
        <div flex></div>
        <paper-icon-button icon="search"></paper-icon-button>
        <paper-icon-button icon="more-vert"></paper-icon-button>
        <div id="title" class="bottom indent title">{{category}}</div>
      </core-toolbar>
      <!-- end -->
      <!-- my literation items -->
     <div layout vertical class="contentcontainer">
       <template repeat="{{articlecatalog in articlecatalogs}}">
          <div layout horizontal  class="rowcontent">
            <div flex></div>
            <div flex two>
              <core-selector>
                <div style="border: 1px solid #bebebe; padding: 16px; margin: 16px; border-radius: 5px; background-color: #fff; color: #555;">
                  <div style="display: inline-block; height: 64px; width: 64px; border-radius: 50%; background: #ddd; line-height: 64px; font-size: 30px; color: #666; text-align: center;">Q</div>
                  <div style="font-size: 22px; padding: 8px 0 16px; color: #888;"></div>
                  <div style="font-size: 16px; padding-bottom: 8px;">{{articlecatalog.title}}</div>
                  <div style="font-size: 12px;">{{articlecatalog.description}}</div>
                </div>
              </core-selector>
            </div>
            <div flex></div>
          </div>
        </template>
        <div hidden?="{{!$.threshold.lowerTriggered}}">Please wait...</div>
      </div>
      <!-- end -->
    </core-scroll-header-panel>



Above are my main code to implement scroll threshold,what problem i met is no matter what lowerThreshold is set,when i scroll the page,even just a little,it triggered the lower-trigger event.how to correctly use the core-scroll-threshlod?