Search code examples
polymerweb-componentpaper-elements

paper-scroll-header-panel not working

HTML document body contains two independent paper-scroll-header-panels inside a neon-animated-page. After switching the neon-animated-page from page 0 to page 1, the paper-scroll-panel on page 1 is not working.

http://jsbin.com/winedi/edit?html,output

Solution

  • Reason : paper-scroll-header-panel when it is first loaded calculates the header height. Then it listens to only iron-resize event. But neon animated pages do not fire iron-resize event while switching pages. From https://github.com/PolymerElements/paper-scroll-header-panel/blob/master/paper-scroll-header-panel.html. line number 230

     * By default, the height will be measured when it is ready.  If the height
       * changes later the user needs to either set this value to reflect the
       * new height or invoke `measureHeaderHeight()`.

    Solution : I've solved this issue by calling measureHeaderHeight() method of the second paper-scroll-header-panel explicitly. check this http://jsbin.com/visazasena/edit?html,output

    Polymer({
  is: "inbox-view",

  next_page: function() {
    document.querySelector("#main-page").selected = 1;
  }

});

    Change this to

    Polymer({
  is: "inbox-view",

  next_page: function() {
    document.querySelector("#main-page").selected = 1;
    document.querySelector("#panel").measureHeaderHeight();

  }
});