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>
    <meta charset="utf-8" />
    <title>Test</title>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1, width=device-width">
    <link href="style.css" rel="stylesheet">
</head>
​
<body>
    <div class="wrapper">
​
        <header>
            <h1>Header</h1>
​
            <button id="right">RMenu</button>
            <button id="left">LMenu</button>
​
        </header>
​
        <main class="content">
            <div class="block"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet aliquet augue, ut faucibus nibh vulputate id. Suspendisse fermentum eros et posuere vestibulum. Mauris varius lacinia tempus. Duis mollis nunc diam, nec luctus lacus
                lobortis sed. Mauris a sagittis mi. Curabitur consequat orci dolor, et scelerisque massa placerat mattis. Nam hendrerit in mauris nec varius. Maecenas faucibus viverra leo, ac gravida orci suscipit eu. Etiam sollicitudin sit amet ex eu
                tincidunt. Fusce ac fermentum elit. Sed vel orci ac turpis elementum commodo id vitae nibh. Pellentesque porta erat feugiat facilisis aliquet. Nunc consectetur libero dignissim, aliquam nisi sed, volutpat sem. Aliquam aliquet justo non
​
            </div>
        </main>
​
        <div id="leftMenu">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
​
        <div id="rightMenu">
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
        </div>
​
​
​
​
        <footer>Footer</footer>
    </div>
​
    <script src="main.js"></script>
</body>
​
</html>
 
window.addEventListener('scroll', stickyHeader);
var block = document.querySelector('.block');
var blockTop = block.getBoundingClientRect().top + window.pageYOffset;
var header = document.querySelector('header');
var headerBottom = header.getBoundingClientRect().bottom + window.pageYOffset;
var flag = true;
​
function stickyHeader() {
​
    if (window.pageYOffset < blockTop) {
        block.classList.remove('sticky');
        flag = true;
    } else if (window.pageYOffset > blockTop && flag) {
        block.classList.add('sticky');
        block.style.opacity = 0;
        fade(header, 1000, 50);
        flag = false;
    } else {
        clearInterval(fade);
    }
}
​
function fade(elem, t, f) {
    var fps = f || 50;
    var time = t || 500;
    var steps = time / fps;
    var op = 0;
    var d0 = 1 / steps;
    var timer = setInterval(function() {
        op += d0;
        block.style.opacity = op;
        steps--;
        if (steps == 0) {
            clearInterval(timer);
        }
    }, (1000 / fps));
​
};
​
var buttonL = document.querySelector('#left');
var menuL = document.querySelector('#leftMenu')
​
buttonL.addEventListener('click', function() {
    menuL.classList.toggle('show');
})
​
var buttonR = document.querySelector('#right');
var menuR = document.querySelector('#rightMenu')
​
buttonR.addEventListener('click', function() {
    menuR.classList.toggle('show');
})
Output

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

Dismiss x
public
Bin info
Virovetspro
0viewers