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>
    <header>
        <h1>Sticky Header</h1>
    </header>
​
​
    <main class="content">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 augue facilisis, sed facilisis
        lectus varius. Pellentesque in nunc eget diam condimentum egestas vel non mauris. Vestibulum ut sagittis justo. Donec pharetra massa magna, at laoreet dolor rhoncus non. Sed dignissim imperdiet rhoncus. Fusce gravida ipsum ut tellus condimentum,
        sit amet ornare augue sagittis. Etiam viverra nulla nec ante pellentesque, id gravida ipsum rhoncus. Vivamus rhoncus lectus vitae erat posuere, in tristique dolor porta. Sed posuere auctor lacus ut sollicitudin. Praesent ac sagittis sem. Phasellus
        in mauris iaculis, fermentum lorem sit amet, tristique arcu. Phasellus id ex justo. Praesent a mi mauris. Ut condimentum laoreet libero, at vestibulum libero iaculis a. Sed justo lacus, tincidunt id elit eget, elementum dictum nunc. Cras elementum
        quam sed tortor tempus cursus. Integer eu bibendum nulla. Quisque tempor magna at sagittis vestibulum. Aenean porta aliquet lobortis. Nunc eu tempor tortor, eget porttitor magna. Nulla finibus fermentum semper. Nunc sollicitudin ac ante quis sollicitudin.
        Pellentesque accumsan rhoncus nulla sed mattis. Vestibulum at nisl maximus ligula imperdiet faucibus sed vitae risus. Suspendisse in ex maximus lacus pulvinar laoreet. Fusce suscipit ipsum a massa hendrerit, rhoncus accumsan leo hendrerit. Ut
        gravida vestibulum est et elementum. Nam id ullamcorper ligula. Nam hendrerit lacus quis orci suscipit, eu vehicula quam porta. Nulla vehicula nunc arcu, ut pellentesque magna suscipit nec. Ut euismod, orci placerat pharetra posuere, enim nunc
        commodo risus, nec finibus est erat et tellus. Proin nec sem arcu. Nulla facilisi. In euismod mi quis felis condimentum, at mattis mi iaculis. Vestibulum efficitur rhoncus lorem, vel feugiat magna pellentesque at. Curabitur tincidunt tellus eu
        ex mattis, non tempor neque pharetra. Mauris commodo sollicitudin magna, et rutrum felis imperdiet at. Proin ullamcorper eget enim nec mattis. Pellentesque varius, orci sed pulvinar maximus, massa velit scelerisque nisi, ut lacinia odio nibh a
        elit. Nulla sed mi urna. Aenean et tincidunt arcu, eu placerat neque. Donec ut mattis lacus. Vivamus dapibus malesuada felis sit amet tristique. Vestibulum at varius nibh. Curabitur ullamcorper, orci vitae elementum malesuada, est mi tincidunt
        felis, et fringilla mauris tellus a nulla. Aenean suscipit ligula at felis mattis, vitae tincidunt enim faucibus. Sed auctor diam vitae urna elementum sagittis. Nullam fermentum erat eu lacus hendrerit consectetur. Maecenas porttitor odio id ultrices
        imperdiet. In hac habitasse platea dictumst. Nunc scelerisque nisi quis massa tristique molestie. Morbi commodo neque sit amet malesuada euismod. In vel neque eget est tincidunt tristique non ut quam. Pellentesque vel mauris nisl. Maecenas risus
        velit, porttitor in pharetra in, dignissim ac risus. Aliquam elit turpis, vulputate non efficitur eu, tempus eget massa. Curabitur non euismod magna. Duis auctor lectus vel neque ultricies accumsan sit amet vitae nulla. Mauris massa odio, commodo
        eu augue pharetra, elementum semper ex. Vivamus sed tortor commodo, maximus dolor faucibus, laoreet justo. Proin tincidunt velit at mauris porta fringilla. Nunc eu ligula in magna pulvinar posuere id ac ante. Proin in dictum sapien. Nunc in risus
        ut turpis ultrices mattis viverra et orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quam tortor, vestibulum a vestibulum nec, congue sit amet dolor. Sed nec nulla dui. Aliquam erat volutpat. Nam pulvinar lacus turpis,
        quis placerat ipsum luctus quis. Cras nec vulputate nisl. Morbi tincidunt ligula in diam ornare consectetur. Mauris in feugiat enim. Maecenas sem magna, fringilla non urna interdum, ultricies pellentesque urna. Quisque placerat egestas nulla,
        sit amet lobortis lacus ultricies sed.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 augue facilisis, sed facilisis lectus varius. Pellentesque in nunc eget diam condimentum egestas vel non mauris. Vestibulum ut sagittis justo. Donec pharetra massa magna, at laoreet dolor rhoncus non. Sed dignissim imperdiet
        rhoncus. Fusce gravida ipsum ut tellus condimentum, sit amet ornare augue sagittis. Etiam viverra nulla nec ante pellentesque, id gravida ipsum rhoncus. Vivamus rhoncus lectus vitae erat posuere, in tristique dolor porta. Sed posuere auctor lacus
        ut sollicitudin. Praesent ac sagittis sem. Phasellus in mauris iaculis, fermentum lorem sit amet, tristique arcu. Phasellus id ex justo. Praesent a mi mauris. Ut condimentum laoreet libero, at vestibulum libero iaculis a. Sed justo lacus, tincidunt
        id elit eget, elementum dictum nunc. Cras elementum quam sed tortor tempus cursus. Integer eu bibendum nulla. Quisque tempor magna at sagittis vestibulum. Aenean porta aliquet lobortis. Nunc eu tempor tortor, eget porttitor magna. Nulla finibus
        fermentum semper. Nunc sollicitudin ac ante quis sollicitudin. Pellentesque accumsan rhoncus nulla sed mattis. Vestibulum at nisl maximus ligula imperdiet faucibus sed vitae risus. Suspendisse in ex maximus lacus pulvinar laoreet. Fusce suscipit
        ipsum a massa hendrerit, rhoncus accumsan leo hendrerit. Ut gravida vestibulum est et elementum. Nam id ullamcorper ligula. Nam hendrerit lacus quis orci suscipit, eu vehicula quam porta. Nulla vehicula nunc arcu, ut pellentesque magna suscipit
        nec. Ut euismod, orci placerat pharetra posuere, enim nunc commodo risus, nec finibus est erat et tellus. Proin nec sem arcu. Nulla facilisi. In euismod mi quis felis condimentum, at mattis mi iaculis. Vestibulum efficitur rhoncus lorem, vel feugiat
        magna pellentesque at. Curabitur tincidunt tellus eu ex mattis, non tempor neque pharetra. Mauris commodo sollicitudin magna, et rutrum felis imperdiet at. Proin ullamcorper eget enim nec mattis. Pellentesque varius, orci sed pulvinar maximus,
        massa velit scelerisque nisi, ut lacinia odio nibh a elit. Nulla sed mi urna. Aenean et tincidunt arcu, eu placerat neque. Donec ut mattis lacus. Vivamus dapibus malesuada felis sit amet tristique. Vestibulum at varius nibh. Curabitur ullamcorper,
        orci vitae elementum malesuada, est mi tincidunt felis, et fringilla mauris tellus a nulla. Aenean suscipit ligula at felis mattis, vitae tincidunt enim faucibus. Sed auctor diam vitae urna elementum sagittis. Nullam fermentum erat eu lacus hendrerit
        consectetur. Maecenas porttitor odio id ultrices imperdiet. In hac habitasse platea dictumst. Nunc scelerisque nisi quis massa tristique molestie. Morbi commodo neque sit amet malesuada euismod. In vel neque eget est tincidunt tristique non ut
        quam. Pellentesque vel mauris nisl. Maecenas risus velit, porttitor in pharetra in, dignissim ac risus. Aliquam elit turpis, vulputate non efficitur eu, tempus eget massa. Curabitur non euismod magna. Duis auctor lectus vel neque ultricies accumsan
        sit amet vitae nulla. Mauris massa odio, commodo eu augue pharetra, elementum semper ex. Vivamus sed tortor commodo, maximus dolor faucibus, laoreet justo. Proin tincidunt velit at mauris porta fringilla. Nunc eu ligula in magna pulvinar posuere
        id ac ante. Proin in dictum sapien. Nunc in risus ut turpis ultrices mattis viverra et orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quam tortor, vestibulum a vestibulum nec, congue sit amet dolor. Sed nec nulla dui.
        Aliquam erat volutpat. Nam pulvinar lacus turpis, quis placerat ipsum luctus quis. Cras nec vulputate nisl. Morbi tincidunt ligula in diam ornare consectetur. Mauris in feugiat enim. Maecenas sem magna, fringilla non urna interdum, ultricies pellentesque
        urna. Quisque placerat egestas nulla, sit amet lobortis lacus ultricies sed.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 augue facilisis, sed facilisis lectus varius. Pellentesque in nunc eget diam condimentum egestas vel non mauris. Vestibulum ut sagittis justo. Donec pharetra massa magna, at laoreet dolor rhoncus
        non. Sed dignissim imperdiet rhoncus. Fusce gravida ipsum ut tellus condimentum, sit amet ornare augue sagittis. Etiam viverra nulla nec ante pellentesque, id gravida ipsum rhoncus. Vivamus rhoncus lectus vitae erat posuere, in tristique dolor
        porta. Sed posuere auctor lacus ut sollicitudin. Praesent ac sagittis sem. Phasellus in mauris iaculis, fermentum lorem sit amet, tristique arcu. Phasellus id ex justo. Praesent a mi mauris. Ut condimentum laoreet libero, at vestibulum libero
        iaculis a. Sed justo lacus, tincidunt id elit eget, elementum dictum nunc. Cras elementum quam sed tortor tempus cursus. Integer eu bibendum nulla. Quisque tempor magna at sagittis vestibulum. Aenean porta aliquet lobortis. Nunc eu tempor tortor,
        eget porttitor magna. Nulla finibus fermentum semper. Nunc sollicitudin ac ante quis sollicitudin. Pellentesque accumsan rhoncus nulla sed mattis. Vestibulum at nisl maximus ligula imperdiet faucibus sed vitae risus. Suspendisse in ex maximus
        lacus pulvinar laoreet. Fusce suscipit ipsum a massa hendrerit, rhoncus accumsan leo hendrerit. Ut gravida vestibulum est et elementum. Nam id ullamcorper ligula. Nam hendrerit lacus quis orci suscipit, eu vehicula quam porta. Nulla vehicula nunc
        arcu, ut pellentesque magna suscipit nec. Ut euismod, orci placerat pharetra posuere, enim nunc commodo risus, nec finibus est erat et tellus. Proin nec sem arcu. Nulla facilisi. In euismod mi quis felis condimentum, at mattis mi iaculis. Vestibulum
        efficitur rhoncus lorem, vel feugiat magna pellentesque at. Curabitur tincidunt tellus eu ex mattis, non tempor neque pharetra. Mauris commodo sollicitudin magna, et rutrum felis imperdiet at. Proin ullamcorper eget enim nec mattis. Pellentesque
        varius, orci sed pulvinar maximus, massa velit scelerisque nisi, ut lacinia odio nibh a elit. Nulla sed mi urna. Aenean et tincidunt arcu, eu placerat neque. Donec ut mattis lacus. Vivamus dapibus malesuada felis sit amet tristique. Vestibulum
        at varius nibh. Curabitur ullamcorper, orci vitae elementum malesuada, est mi tincidunt felis, et fringilla mauris tellus a nulla. Aenean suscipit ligula at felis mattis, vitae tincidunt enim faucibus. Sed auctor diam vitae urna elementum sagittis.
        Nullam fermentum erat eu lacus hendrerit consectetur. Maecenas porttitor odio id ultrices imperdiet. In hac habitasse platea dictumst. Nunc scelerisque nisi quis massa tristique molestie. Morbi commodo neque sit amet malesuada euismod. In vel
        neque eget est tincidunt tristique non ut quam. Pellentesque vel mauris nisl. Maecenas risus velit, porttitor in pharetra in, dignissim ac risus. Aliquam elit turpis, vulputate non efficitur eu, tempus eget massa. Curabitur non euismod magna.
        Duis auctor lectus vel neque ultricies accumsan sit amet vitae nulla. Mauris massa odio, commodo eu augue pharetra, elementum semper ex. Vivamus sed tortor commodo, maximus dolor faucibus, laoreet justo. Proin tincidunt velit at mauris porta fringilla.
        Nunc eu ligula in magna pulvinar posuere id ac ante. Proin in dictum sapien. Nunc in risus ut turpis ultrices mattis viverra et orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quam tortor, vestibulum a vestibulum nec,
        congue sit amet dolor. Sed nec nulla dui. Aliquam erat volutpat. Nam pulvinar lacus turpis, quis placerat ipsum luctus quis. Cras nec vulputate nisl. Morbi tincidunt ligula in diam ornare consectetur. Mauris in feugiat enim. Maecenas sem magna,
        fringilla non urna interdum, ultricies pellentesque urna. Quisque placerat egestas nulla, sit amet lobortis lacus ultricies sed.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 augue facilisis, sed facilisis lectus varius. Pellentesque in nunc eget diam condimentum egestas vel non mauris. Vestibulum ut sagittis justo.
        Donec pharetra massa magna, at laoreet dolor rhoncus non. Sed dignissim imperdiet rhoncus. Fusce gravida ipsum ut tellus condimentum, sit amet ornare augue sagittis. Etiam viverra nulla nec ante pellentesque, id gravida ipsum rhoncus. Vivamus
        rhoncus lectus vitae erat posuere, in tristique dolor porta. Sed posuere auctor lacus ut sollicitudin. Praesent ac sagittis sem. Phasellus in mauris iaculis, fermentum lorem sit amet, tristique arcu. Phasellus id ex justo. Praesent a mi mauris.
        Ut condimentum laoreet libero, at vestibulum libero iaculis a. Sed justo lacus, tincidunt id elit eget, elementum dictum nunc. Cras elementum quam sed tortor tempus cursus. Integer eu bibendum nulla. Quisque tempor magna at sagittis vestibulum.
        Aenean porta aliquet lobortis. Nunc eu tempor tortor, eget porttitor magna. Nulla finibus fermentum semper. Nunc sollicitudin ac ante quis sollicitudin. Pellentesque accumsan rhoncus nulla sed mattis. Vestibulum at nisl maximus ligula imperdiet
        faucibus sed vitae risus. Suspendisse in ex maximus lacus pulvinar laoreet. Fusce suscipit ipsum a massa hendrerit, rhoncus accumsan leo hendrerit. Ut gravida vestibulum est et elementum. Nam id ullamcorper ligula. Nam hendrerit lacus quis orci
        suscipit, eu vehicula quam porta. Nulla vehicula nunc arcu, ut pellentesque magna suscipit nec. Ut euismod, orci placerat pharetra posuere, enim nunc commodo risus, nec finibus est erat et tellus. Proin nec sem arcu. Nulla facilisi. In euismod
        mi quis felis condimentum, at mattis mi iaculis. Vestibulum efficitur rhoncus lorem, vel feugiat magna pellentesque at. Curabitur tincidunt tellus eu ex mattis, non tempor neque pharetra. Mauris commodo sollicitudin magna, et rutrum felis imperdiet
        at. Proin ullamcorper eget enim nec mattis. Pellentesque varius, orci sed pulvinar maximus, massa velit scelerisque nisi, ut lacinia odio nibh a elit. Nulla sed mi urna. Aenean et tincidunt arcu, eu placerat neque. Donec ut mattis lacus. Vivamus
        dapibus malesuada felis sit amet tristique. Vestibulum at varius nibh. Curabitur ullamcorper, orci vitae elementum malesuada, est mi tincidunt felis, et fringilla mauris tellus a nulla. Aenean suscipit ligula at felis mattis, vitae tincidunt enim
        faucibus. Sed auctor diam vitae urna elementum sagittis. Nullam fermentum erat eu lacus hendrerit consectetur. Maecenas porttitor odio id ultrices imperdiet. In hac habitasse platea dictumst. Nunc scelerisque nisi quis massa tristique molestie.
        Morbi commodo neque sit amet malesuada euismod. In vel neque eget est tincidunt tristique non ut quam. Pellentesque vel mauris nisl. Maecenas risus velit, porttitor in pharetra in, dignissim ac risus. Aliquam elit turpis, vulputate non efficitur
        eu, tempus eget massa. Curabitur non euismod magna. Duis auctor lectus vel neque ultricies accumsan sit amet vitae nulla. Mauris massa odio, commodo eu augue pharetra, elementum semper ex. Vivamus sed tortor commodo, maximus dolor faucibus, laoreet
        justo. Proin tincidunt velit at mauris porta fringilla. Nunc eu ligula in magna pulvinar posuere id ac ante. Proin in dictum sapien. Nunc in risus ut turpis ultrices mattis viverra et orci. Interdum et malesuada fames ac ante ipsum primis in faucibus.
        Donec quam tortor, vestibulum a vestibulum nec, congue sit amet dolor. Sed nec nulla dui. Aliquam erat volutpat. Nam pulvinar lacus turpis, quis placerat ipsum luctus quis. Cras nec vulputate nisl. Morbi tincidunt ligula in diam ornare consectetur.
        Mauris in feugiat enim. Maecenas sem magna, fringilla non urna interdum, ultricies pellentesque urna. Quisque placerat egestas nulla, sit amet lobortis lacus ultricies sed.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 augue facilisis, sed facilisis lectus varius. Pellentesque in nunc eget diam condimentum egestas vel
        non mauris. Vestibulum ut sagittis justo. Donec pharetra massa magna, at laoreet dolor rhoncus non. Sed dignissim imperdiet rhoncus. Fusce gravida ipsum ut tellus condimentum, sit amet ornare augue sagittis. Etiam viverra nulla nec ante pellentesque,
        id gravida ipsum rhoncus. Vivamus rhoncus lectus vitae erat posuere, in tristique dolor porta. Sed posuere auctor lacus ut sollicitudin. Praesent ac sagittis sem. Phasellus in mauris iaculis, fermentum lorem sit amet, tristique arcu. Phasellus
        id ex justo. Praesent a mi mauris. Ut condimentum laoreet libero, at vestibulum libero iaculis a. Sed justo lacus, tincidunt id elit eget, elementum dictum nunc. Cras elementum quam sed tortor tempus cursus. Integer eu bibendum nulla. Quisque
        tempor magna at sagittis vestibulum. Aenean porta aliquet lobortis. Nunc eu tempor tortor, eget porttitor magna. Nulla finibus fermentum semper. Nunc sollicitudin ac ante quis sollicitudin. Pellentesque accumsan rhoncus nulla sed mattis. Vestibulum
        at nisl maximus ligula imperdiet faucibus sed vitae risus. Suspendisse in ex maximus lacus pulvinar laoreet. Fusce suscipit ipsum a massa hendrerit, rhoncus accumsan leo hendrerit. Ut gravida vestibulum est et elementum. Nam id ullamcorper ligula.
        Nam hendrerit lacus quis orci suscipit, eu vehicula quam porta. Nulla vehicula nunc arcu, ut pellentesque magna suscipit nec. Ut euismod, orci placerat pharetra posuere, enim nunc commodo risus, nec finibus est erat et tellus. Proin nec sem arcu.
        Nulla facilisi. In euismod mi quis felis condimentum, at mattis mi iaculis. Vestibulum efficitur rhoncus lorem, vel feugiat magna pellentesque at. Curabitur tincidunt tellus eu ex mattis, non tempor neque pharetra. Mauris commodo sollicitudin
        magna, et rutrum felis imperdiet at. Proin ullamcorper eget enim nec mattis. Pellentesque varius, orci sed pulvinar maximus, massa velit scelerisque nisi, ut lacinia odio nibh a elit. Nulla sed mi urna. Aenean et tincidunt arcu, eu placerat neque.
        Donec ut mattis lacus. Vivamus dapibus malesuada felis sit amet tristique. Vestibulum at varius nibh. Curabitur ullamcorper, orci vitae elementum malesuada, est mi tincidunt felis, et fringilla mauris tellus a nulla. Aenean suscipit ligula at
        felis mattis, vitae tincidunt enim faucibus. Sed auctor diam vitae urna elementum sagittis. Nullam fermentum erat eu lacus hendrerit consectetur. Maecenas porttitor odio id ultrices imperdiet. In hac habitasse platea dictumst. Nunc scelerisque
        nisi quis massa tristique molestie. Morbi commodo neque sit amet malesuada euismod. In vel neque eget est tincidunt tristique non ut quam. Pellentesque vel mauris nisl. Maecenas risus velit, porttitor in pharetra in, dignissim ac risus. Aliquam
        elit turpis, vulputate non efficitur eu, tempus eget massa. Curabitur non euismod magna. Duis auctor lectus vel neque ultricies accumsan sit amet vitae nulla. Mauris massa odio, commodo eu augue pharetra, elementum semper ex. Vivamus sed tortor
        commodo, maximus dolor faucibus, laoreet justo. Proin tincidunt velit at mauris porta fringilla. Nunc eu ligula in magna pulvinar posuere id ac ante. Proin in dictum sapien. Nunc in risus ut turpis ultrices mattis viverra et orci. Interdum et
        malesuada fames ac ante ipsum primis in faucibus. Donec quam tortor, vestibulum a vestibulum nec, congue sit amet dolor. Sed nec nulla dui. Aliquam erat volutpat. Nam pulvinar lacus turpis, quis placerat ipsum luctus quis. Cras nec vulputate nisl.
        Morbi tincidunt ligula in diam ornare consectetur. Mauris in feugiat enim. Maecenas sem magna, fringilla non urna interdum, ultricies pellentesque urna. Quisque placerat egestas nulla, sit amet lobortis lacus ultricies sed.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 augue facilisis, sed facilisis lectus
        varius. Pellentesque in nunc eget diam condimentum egestas vel non mauris. Vestibulum ut sagittis justo. Donec pharetra massa magna, at laoreet dolor rhoncus non. Sed dignissim imperdiet rhoncus. Fusce gravida ipsum ut tellus condimentum, sit
        amet ornare augue sagittis. Etiam viverra nulla nec ante pellentesque, id gravida ipsum rhoncus. Vivamus rhoncus lectus vitae erat posuere, in tristique dolor porta. Sed posuere auctor lacus ut sollicitudin. Praesent ac sagittis sem. Phasellus
        in mauris iaculis, fermentum lorem sit amet, tristique arcu. Phasellus id ex justo. Praesent a mi mauris. Ut condimentum laoreet libero, at vestibulum libero iaculis a. Sed justo lacus, tincidunt id elit eget, elementum dictum nunc. Cras elementum
        quam sed tortor tempus cursus. Integer eu bibendum nulla. Quisque tempor magna at sagittis vestibulum. Aenean porta aliquet lobortis. Nunc eu tempor tortor, eget porttitor magna. Nulla finibus fermentum semper. Nunc sollicitudin ac ante quis sollicitudin.
        Pellentesque accumsan rhoncus nulla sed mattis. Vestibulum at nisl maximus ligula imperdiet faucibus sed vitae risus. Suspendisse in ex maximus lacus pulvinar laoreet. Fusce suscipit ipsum a massa hendrerit, rhoncus accumsan leo hendrerit. Ut
        gravida vestibulum est et elementum. Nam id ullamcorper ligula. Nam hendrerit lacus quis orci suscipit, eu vehicula quam porta. Nulla vehicula nunc arcu, ut pellentesque magna suscipit nec. Ut euismod, orci placerat pharetra posuere, enim nunc
        commodo risus, nec finibus est erat et tellus. Proin nec sem arcu. Nulla facilisi. In euismod mi quis felis condimentum, at mattis mi iaculis. Vestibulum efficitur rhoncus lorem, vel feugiat magna pellentesque at. Curabitur tincidunt tellus eu
        ex mattis, non tempor neque pharetra. Mauris commodo sollicitudin magna, et rutrum felis imperdiet at. Proin ullamcorper eget enim nec mattis. Pellentesque varius, orci sed pulvinar maximus, massa velit scelerisque nisi, ut lacinia odio nibh a
        elit. Nulla sed mi urna. Aenean et tincidunt arcu, eu placerat neque. Donec ut mattis lacus. Vivamus dapibus malesuada felis sit amet tristique. Vestibulum at varius nibh. Curabitur ullamcorper, orci vitae elementum malesuada, est mi tincidunt
        felis, et fringilla mauris tellus a nulla. Aenean suscipit ligula at felis mattis, vitae tincidunt enim faucibus. Sed auctor diam vitae urna elementum sagittis. Nullam fermentum erat eu lacus hendrerit consectetur. Maecenas porttitor odio id ultrices
        imperdiet. In hac habitasse platea dictumst. Nunc scelerisque nisi quis massa tristique molestie. Morbi commodo neque sit amet malesuada euismod. In vel neque eget est tincidunt tristique non ut quam. Pellentesque vel mauris nisl. Maecenas risus
        velit, porttitor in pharetra in, dignissim ac risus. Aliquam elit turpis, vulputate non efficitur eu, tempus eget massa. Curabitur non euismod magna. Duis auctor lectus vel neque ultricies accumsan sit amet vitae nulla. Mauris massa odio, commodo
        eu augue pharetra, elementum semper ex. Vivamus sed tortor commodo, maximus dolor faucibus, laoreet justo. Proin tincidunt velit at mauris porta fringilla. Nunc eu ligula in magna pulvinar posuere id ac ante. Proin in dictum sapien. Nunc in risus
        ut turpis ultrices mattis viverra et orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quam tortor, vestibulum a vestibulum nec, congue sit amet dolor. Sed nec nulla dui. Aliquam erat volutpat. Nam pulvinar lacus turpis,
        quis placerat ipsum luctus quis. Cras nec vulputate nisl. Morbi tincidunt ligula in diam ornare consectetur. Mauris in feugiat enim. Maecenas sem magna, fringilla non urna interdum, ultricies pellentesque urna. Quisque placerat egestas nulla,
        sit amet lobortis lacus ultricies sed.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 augue facilisis, sed facilisis lectus varius. Pellentesque in nunc eget diam condimentum egestas vel non mauris. Vestibulum ut sagittis justo. Donec pharetra massa magna, at laoreet dolor rhoncus non. Sed dignissim imperdiet
        rhoncus. Fusce gravida ipsum ut tellus condimentum, sit amet ornare augue sagittis. Etiam viverra nulla nec ante pellentesque, id gravida ipsum rhoncus. Vivamus rhoncus lectus vitae erat posuere, in tristique dolor porta. Sed posuere auctor lacus
        ut sollicitudin. Praesent ac sagittis sem. Phasellus in mauris iaculis, fermentum lorem sit amet, tristique arcu. Phasellus id ex justo. Praesent a mi mauris. Ut condimentum laoreet libero, at vestibulum libero iaculis a. Sed justo lacus, tincidunt
        id elit eget, elementum dictum nunc. Cras elementum quam sed tortor tempus cursus. Integer eu bibendum nulla. Quisque tempor magna at sagittis vestibulum. Aenean porta aliquet lobortis. Nunc eu tempor tortor, eget porttitor magna. Nulla finibus
        fermentum semper. Nunc sollicitudin ac ante quis sollicitudin. Pellentesque accumsan rhoncus nulla sed mattis. Vestibulum at nisl maximus ligula imperdiet faucibus sed vitae risus. Suspendisse in ex maximus lacus pulvinar laoreet. Fusce suscipit
        ipsum a massa hendrerit, rhoncus accumsan leo hendrerit. Ut gravida vestibulum est et elementum. Nam id ullamcorper ligula. Nam hendrerit lacus quis orci suscipit, eu vehicula quam porta. Nulla vehicula nunc arcu, ut pellentesque magna suscipit
        nec. Ut euismod, orci placerat pharetra posuere, enim nunc commodo risus, nec finibus est erat et tellus. Proin nec sem arcu. Nulla facilisi. In euismod mi quis felis condimentum, at mattis mi iaculis. Vestibulum efficitur rhoncus lorem, vel feugiat
        magna pellentesque at. Curabitur tincidunt tellus eu ex mattis, non tempor neque pharetra. Mauris commodo sollicitudin magna, et rutrum felis imperdiet at. Proin ullamcorper eget enim nec mattis. Pellentesque varius, orci sed pulvinar maximus,
        massa velit scelerisque nisi, ut lacinia odio nibh a elit. Nulla sed mi urna. Aenean et tincidunt arcu, eu placerat neque. Donec ut mattis lacus. Vivamus dapibus malesuada felis sit amet tristique. Vestibulum at varius nibh. Curabitur ullamcorper,
        orci vitae elementum malesuada, est mi tincidunt felis, et fringilla mauris tellus a nulla. Aenean suscipit ligula at felis mattis, vitae tincidunt enim faucibus. Sed auctor diam vitae urna elementum sagittis. Nullam fermentum erat eu lacus hendrerit
        consectetur. Maecenas porttitor odio id ultrices imperdiet. In hac habitasse platea dictumst. Nunc scelerisque nisi quis massa tristique molestie. Morbi commodo neque sit amet malesuada euismod. In vel neque eget est tincidunt tristique non ut
        quam. Pellentesque vel mauris nisl. Maecenas risus velit, porttitor in pharetra in, dignissim ac risus. Aliquam elit turpis, vulputate non efficitur eu, tempus eget massa. Curabitur non euismod magna. Duis auctor lectus vel neque ultricies accumsan
        sit amet vitae nulla. Mauris massa odio, commodo eu augue pharetra, elementum semper ex. Vivamus sed tortor commodo, maximus dolor faucibus, laoreet justo. Proin tincidunt velit at mauris porta fringilla. Nunc eu ligula in magna pulvinar posuere
        id ac ante. Proin in dictum sapien. Nunc in risus ut turpis ultrices mattis viverra et orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quam tortor, vestibulum a vestibulum nec, congue sit amet dolor. Sed nec nulla dui.
        Aliquam erat volutpat. Nam pulvinar lacus turpis, quis placerat ipsum luctus quis. Cras nec vulputate nisl. Morbi tincidunt ligula in diam ornare consectetur. Mauris in feugiat enim. Maecenas sem magna, fringilla non urna interdum, ultricies pellentesque
        urna. Quisque placerat egestas nulla, sit amet lobortis lacus ultricies sed.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 augue facilisis, sed facilisis lectus varius. Pellentesque in nunc eget diam condimentum egestas vel non mauris. Vestibulum ut sagittis justo. Donec pharetra massa magna, at laoreet dolor rhoncus
        non. Sed dignissim imperdiet rhoncus. Fusce gravida ipsum ut tellus condimentum, sit amet ornare augue sagittis. Etiam viverra nulla nec ante pellentesque, id gravida ipsum rhoncus. Vivamus rhoncus lectus vitae erat posuere, in tristique dolor
        porta. Sed posuere auctor lacus ut sollicitudin. Praesent ac sagittis sem. Phasellus in mauris iaculis, fermentum lorem sit amet, tristique arcu. Phasellus id ex justo. Praesent a mi mauris. Ut condimentum laoreet libero, at vestibulum libero
        iaculis a. Sed justo lacus, tincidunt id elit eget, elementum dictum nunc. Cras elementum quam sed tortor tempus cursus. Integer eu bibendum nulla. Quisque tempor magna at sagittis vestibulum. Aenean porta aliquet lobortis. Nunc eu tempor tortor,
        eget porttitor magna. Nulla finibus fermentum semper. Nunc sollicitudin ac ante quis sollicitudin. Pellentesque accumsan rhoncus nulla sed mattis. Vestibulum at nisl maximus ligula imperdiet faucibus sed vitae risus. Suspendisse in ex maximus
        lacus pulvinar laoreet. Fusce suscipit ipsum a massa hendrerit, rhoncus accumsan leo hendrerit. Ut gravida vestibulum est et elementum. Nam id ullamcorper ligula. Nam hendrerit lacus quis orci suscipit, eu vehicula quam porta. Nulla vehicula nunc
        arcu, ut pellentesque magna suscipit nec. Ut euismod, orci placerat pharetra posuere, enim nunc commodo risus, nec finibus est erat et tellus. Proin nec sem arcu. Nulla facilisi. In euismod mi quis felis condimentum, at mattis mi iaculis. Vestibulum
        efficitur rhoncus lorem, vel feugiat magna pellentesque at. Curabitur tincidunt tellus eu ex mattis, non tempor neque pharetra. Mauris commodo sollicitudin magna, et rutrum felis imperdiet at. Proin ullamcorper eget enim nec mattis. Pellentesque
        varius, orci sed pulvinar maximus, massa velit scelerisque nisi, ut lacinia odio nibh a elit. Nulla sed mi urna. Aenean et tincidunt arcu, eu placerat neque. Donec ut mattis lacus. Vivamus dapibus malesuada felis sit amet tristique. Vestibulum
        at varius nibh. Curabitur ullamcorper, orci vitae elementum malesuada, est mi tincidunt felis, et fringilla mauris tellus a nulla. Aenean suscipit ligula at felis mattis, vitae tincidunt enim faucibus. Sed auctor diam vitae urna elementum sagittis.
        Nullam fermentum erat eu lacus hendrerit consectetur. Maecenas porttitor odio id ultrices imperdiet. In hac habitasse platea dictumst. Nunc scelerisque nisi quis massa tristique molestie. Morbi commodo neque sit amet malesuada euismod. In vel
        neque eget est tincidunt tristique non ut quam. Pellentesque vel mauris nisl. Maecenas risus velit, porttitor in pharetra in, dignissim ac risus. Aliquam elit turpis, vulputate non efficitur eu, tempus eget massa. Curabitur non euismod magna.
        Duis auctor lectus vel neque ultricies accumsan sit amet vitae nulla. Mauris massa odio, commodo eu augue pharetra, elementum semper ex. Vivamus sed tortor commodo, maximus dolor faucibus, laoreet justo. Proin tincidunt velit at mauris porta fringilla.
        Nunc eu ligula in magna pulvinar posuere id ac ante. Proin in dictum sapien. Nunc in risus ut turpis ultrices mattis viverra et orci. Interdum et malesuada fames ac ante ipsum primis in faucibus. Donec quam tortor, vestibulum a vestibulum nec,
        congue sit amet dolor. Sed nec nulla dui. Aliquam erat volutpat. Nam pulvinar lacus turpis, quis placerat ipsum luctus quis. Cras nec vulputate nisl. Morbi tincidunt ligula in diam ornare consectetur. Mauris in feugiat enim. Maecenas sem magna,
        fringilla non urna interdum, ultricies pellentesque urna. Quisque placerat egestas nulla, sit amet lobortis lacus ultricies sed.
    </main>
​
​
    <footer>FOOTER</footer>
    </div>
    <script src="main.js"></script>
</body>
​
</html>
 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
​
.wrapper {
    margin: 0 auto;
    min-height: 100%;
    max-height: 2000px;
    font-size: 100%;
}
​
header {
    top: 20%;
    width: 100%;
    text-align: center;
    font-size: 3em;
    background: rgb(252, 237, 25);
    color: rgb(39, 25, 223);
    position: absolute;
}
​
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    font-size: 3em;
    background: rgb(252, 237, 25);
    color: rgb(39, 25, 223);
    opacity: 1;
}
​
main {
    width: 100%;
    margin-top: auto;
    /* min-height: 1500px; */
    background-color: rgb(198, 252, 234);
}
​
footer {
    width: 100%;
    max-height: 150px;
    background: rgb(31, 201, 231);
    position: relative;
    font-size: 1.5em;
    bottom: 0;
}
 
window.addEventListener('scroll', stickyHeader);
var header = document.querySelector('header');
var headerBottom = header.getBoundingClientRect().bottom + window.pageYOffset;
var flag = true;
​
function stickyHeader() {
​
    if (window.pageYOffset < headerBottom) {
        header.classList.remove('sticky');
​
    } else if (window.pageYOffset > headerBottom) {
        header.classList.add('sticky');
        fade(header, 2000, 50);
        flag = false;
    }
    if (flag) {
        console.log('yes')
    } else {
        console.log('no')
        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;
        header.style.opacity = op;
        steps--;
        if (steps == 0) {
            clearInterval(timer);
        }
    }, (1000 / fps));
​
};
Output

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

Dismiss x
public
Bin info
Virovetspro
0viewers