Created
April 15, 2018 04:06
-
-
Save MasoodGit/dcb5558f305e70402ba8c08ee7860a93 to your computer and use it in GitHub Desktop.
JS Bin scrolling , with sticke header // source https://jsbin.com/yibukaq
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="scrolling , with sticke header"> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width"> | |
| <title>JS Bin</title> | |
| <style id="jsbin-css"> | |
| html,body { | |
| font-size: 16px; | |
| font-family: arial; | |
| line-height: 1; | |
| } | |
| body { | |
| margin: 0; | |
| height: 100%; | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| main { | |
| margin: 0; | |
| height: 100%; | |
| width: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| section { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; | |
| } | |
| .overview { | |
| position: relative; | |
| display: flex; | |
| order: 2; | |
| } | |
| article { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; | |
| } | |
| article.component-overview { | |
| display: block; | |
| width: 100%; | |
| overflow: auto; | |
| } | |
| article.component-overview ol { | |
| padding: 24px; | |
| height: 750px; | |
| color: rgba(33,33,33,0.5); | |
| background-color: #DAF1F7 | |
| } | |
| .top-bar { | |
| position: relative; | |
| display: flex; | |
| order: 1; | |
| z-index: 2; | |
| background-color: #2B86B2; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.25); | |
| padding: 0 1.5em; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| margin: 0; | |
| } | |
| li { | |
| margin:0; | |
| padding:0; | |
| border:0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; | |
| background-color: #fff; | |
| color: #212121; | |
| } | |
| ol > li { | |
| display: flex; | |
| max-width: 960px; | |
| justify-content: center; | |
| margin: 0 auto; | |
| border-radius: 0.125em; | |
| padding: 10px; | |
| margin-bottom: 24px; | |
| width: 100%; | |
| border: 0.0625em solid rgba(33, 33, 33, 0.1); | |
| box-shadow: 0.0625em 0.0625em 0.25em rgba(0, 0, 0, 0.2); | |
| box-sizing: border-box; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <main> | |
| <section class="overview"> | |
| <article class="component-overview"> | |
| <ol> | |
| <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae odit ipsum laboriosam accusamus architecto deleniti, blanditiis soluta illo vero libero voluptates, dicta dolore, maiores nobis perspiciatis voluptas sunt nulla quam!</li> | |
| <li>Ea adipisci explicabo autem, dignissimos atque distinctio necessitatibus. Vel, laborum quam facilis possimus repellat rerum aut. Cum harum tempore nisi, est enim mollitia sapiente quibusdam ea necessitatibus, cumque dolor quod.</li> | |
| <li>Beatae eveniet voluptatum ratione aliquam provident assumenda sequi deserunt pariatur. Doloremque sunt corporis, ipsa harum quae amet reprehenderit adipisci eaque ipsum sapiente nulla, unde est nisi, iste consequatur ut. Nihil.</li> | |
| <li>Itaque deserunt sequi odio quia possimus nulla magni ea fugit inventore, voluptate natus nesciunt, atque doloribus cupiditate eveniet harum! Doloremque reiciendis ipsum numquam velit porro illum amet quos ex id.</li> | |
| <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae odit ipsum laboriosam accusamus architecto deleniti, blanditiis soluta illo vero libero voluptates, dicta dolore, maiores nobis perspiciatis voluptas sunt nulla quam!</li> | |
| <li>Ea adipisci explicabo autem, dignissimos atque distinctio necessitatibus. Vel, laborum quam facilis possimus repellat rerum aut. Cum harum tempore nisi, est enim mollitia sapiente quibusdam ea necessitatibus, cumque dolor quod.</li> | |
| <li>Beatae eveniet voluptatum ratione aliquam provident assumenda sequi deserunt pariatur. Doloremque sunt corporis, ipsa harum quae amet reprehenderit adipisci eaque ipsum sapiente nulla, unde est nisi, iste consequatur ut. Nihil.</li> | |
| <li>Itaque deserunt sequi odio quia possimus nulla magni ea fugit inventore, voluptate natus nesciunt, atque doloribus cupiditate eveniet harum! Doloremque reiciendis ipsum numquam velit porro illum amet quos ex id.</li> | |
| </ol> | |
| <article> | |
| </section> | |
| <section class="top-bar"> | |
| <h1> Top Nav Bar <h1> | |
| </section> | |
| </main> | |
| <script id="jsbin-source-css" type="text/css">html,body { | |
| font-size: 16px; | |
| font-family: arial; | |
| line-height: 1; | |
| } | |
| body { | |
| margin: 0; | |
| height: 100%; | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| main { | |
| margin: 0; | |
| height: 100%; | |
| width: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| section { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; | |
| } | |
| .overview { | |
| position: relative; | |
| display: flex; | |
| order: 2; | |
| } | |
| article { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; | |
| } | |
| article.component-overview { | |
| display: block; | |
| width: 100%; | |
| overflow: auto; | |
| } | |
| article.component-overview ol { | |
| padding: 24px; | |
| height: 750px; | |
| color: rgba(33,33,33,0.5); | |
| background-color: #DAF1F7 | |
| } | |
| .top-bar { | |
| position: relative; | |
| display: flex; | |
| order: 1; | |
| z-index: 2; | |
| background-color: #2B86B2; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.25); | |
| padding: 0 1.5em; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| margin: 0; | |
| } | |
| li { | |
| margin:0; | |
| padding:0; | |
| border:0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; | |
| background-color: #fff; | |
| color: #212121; | |
| } | |
| ol > li { | |
| display: flex; | |
| max-width: 960px; | |
| justify-content: center; | |
| margin: 0 auto; | |
| border-radius: 0.125em; | |
| padding: 10px; | |
| margin-bottom: 24px; | |
| width: 100%; | |
| border: 0.0625em solid rgba(33, 33, 33, 0.1); | |
| box-shadow: 0.0625em 0.0625em 0.25em rgba(0, 0, 0, 0.2); | |
| box-sizing: border-box; | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| html,body { | |
| font-size: 16px; | |
| font-family: arial; | |
| line-height: 1; | |
| } | |
| body { | |
| margin: 0; | |
| height: 100%; | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| main { | |
| margin: 0; | |
| height: 100%; | |
| width: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| section { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; | |
| } | |
| .overview { | |
| position: relative; | |
| display: flex; | |
| order: 2; | |
| } | |
| article { | |
| margin: 0; | |
| padding: 0; | |
| border: 0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; | |
| } | |
| article.component-overview { | |
| display: block; | |
| width: 100%; | |
| overflow: auto; | |
| } | |
| article.component-overview ol { | |
| padding: 24px; | |
| height: 750px; | |
| color: rgba(33,33,33,0.5); | |
| background-color: #DAF1F7 | |
| } | |
| .top-bar { | |
| position: relative; | |
| display: flex; | |
| order: 1; | |
| z-index: 2; | |
| background-color: #2B86B2; | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.25); | |
| padding: 0 1.5em; | |
| } | |
| ol, ul { | |
| list-style: none; | |
| margin: 0; | |
| } | |
| li { | |
| margin:0; | |
| padding:0; | |
| border:0; | |
| font-size: 100%; | |
| font: inherit; | |
| vertical-align: baseline; | |
| background-color: #fff; | |
| color: #212121; | |
| } | |
| ol > li { | |
| display: flex; | |
| max-width: 960px; | |
| justify-content: center; | |
| margin: 0 auto; | |
| border-radius: 0.125em; | |
| padding: 10px; | |
| margin-bottom: 24px; | |
| width: 100%; | |
| border: 0.0625em solid rgba(33, 33, 33, 0.1); | |
| box-shadow: 0.0625em 0.0625em 0.25em rgba(0, 0, 0, 0.2); | |
| box-sizing: border-box; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment