Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <title>section-anim-container-psh</title>
    <meta charset="utf-8" />
​
    <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
​
    <link rel="import" href="../../bower_components/paper-scroll-header-panel/paper-scroll-header-panel.html">
    <link rel="import" href="../../bower_components/paper-toolbar/paper-toolbar.html">
    <link rel="import" href="../../bower_components/iron-icons/iron-icons.html">
    <link rel="import" href="../../bower_components/paper-icon-button/paper-icon-button.html">
​
​
    <style is="custom-style">
        paper-scroll-header-panel {
            position: absolute;
            top: 0; right: 0; bottom: 0; left: 0;
        }
        paper-toolbar { background-color: #760000; }
        paper-toolbar .title { margin: 0 8px;   }
        paper-scroll-header-panel .content { padding: 8px;  }
    </style>
</head>
​
<body class="layout fullbleed">
​
​
    <template is="dom-bind" id="app">
​
        <style>
            .div1 { height: 300px; border: 1px solid grey; margin-bottom: 10px;  padding: 20px; }
        </style>
​
        <paper-scroll-header-panel main>
​
            <paper-toolbar>
​
                <paper-icon-button icon="arrow-back"></paper-icon-button>
                <div class="title">Collapsible Header</div>
                <paper-icon-button icon="search"></paper-icon-button>
                <paper-icon-button icon="menu" on-click="showMenu"></paper-icon-button>
​
            </paper-toolbar>
​
            <div class="content">
​
                <div class="div1">1. Lorem ipsum</div>
                <div class="div1">2. Lorem ipsumt</div>
                <div class="div1">3. Lorem ipsum</div>
                <div class="div1">4. Lorem ipsum</div>
                <div class="div1">5. Lorem ipsum</div>
                <div class="div1">6. Lorem ipsum</div>
​
            </div>
        </paper-scroll-header-panel>
​
    </template>
​
​
    <script>
​
        var app = document.querySelector('#app');
​
        window.addEventListener('WebComponentsReady', function () {
            //console.log('[demo.html] WebComponentsReady');
            app.paperScrollHeaderPanel = document.querySelector('paper-scroll-header-panel');
​
        });
​
        window.addEventListener('scroll', function () {
            console.log('event: scroll ' + getScrollStatus());
        });
​
        window.addEventListener('content-scroll', function (ev) {
            //console.log('event: content-scroll ' + getScrollStatus());
            console.log('event: content-scroll ' + '\nwindow.scrollY = ' + window.scrollY );
        }); // fired by <paper-scroll-header-panel main>
​
​
        function getScrollStatus() {
            return  '\npaperScrollHeaderPanel.getBoundingClientRect().bottom = ' + app.paperScrollHeaderPanel.getBoundingClientRect().bottom +
                    '\npaperScrollHeaderPanel.scrollHeight = ' + app.paperScrollHeaderPanel.scrollHeight +
                   '\nwindow.scrollY = ' + window.scrollY +
                   '\nwindow.pageYOffset = ' + window.pageYOffset; // for IE
        }
​
    </script>
​
</body>
​
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
alfalabspro
0viewers