Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width">
- <title>JS Bin</title>
- <style id="jsbin-css">
- html, body {
- margin: 0;
- padding: 0;
- }
- .main {
- height: 2000px;
- background: linear-gradient(to top, yellow, purple)
- }
- .bar {
- position: fixed;
- width: 5px;
- background: red;
- min-height: 15%;
- right: 0;
- top: 0;
- }
- </style>
- </head>
- <body>
- <div class="bar">
- </div>
- <div class="main"></div>
- <script id="jsbin-javascript">
- var $main = document.querySelector('.main')
- var height = $main.offsetHeight
- var wHeight = window.innerHeight
- var barHeight = wHeight / height * wHeight
- var $bar = document.querySelector('.bar')
- $bar.style.height = barHeight + 'px'
- barHeight = $bar.offsetHeight
- var $body = document.querySelector('body')
- window.addEventListener('scroll', function () {
- var total = (wHeight - barHeight) / barHeight
- var progress = $body.scrollTop / (height - wHeight)
- var translate = progress * total * 100
- $bar.style.transform = 'translateY(' + translate + '%)'
- })
- </script>
- <script id="jsbin-source-css" type="text/css">html, body {
- margin: 0;
- padding: 0;
- }
- .main {
- height: 2000px;
- background: linear-gradient(to top, yellow, purple)
- }
- .bar {
- position: fixed;
- width: 5px;
- background: red;
- min-height: 15%;
- right: 0;
- top: 0;
- }</script>
- <script id="jsbin-source-javascript" type="text/javascript">var $main = document.querySelector('.main')
- var height = $main.offsetHeight
- var wHeight = window.innerHeight
- var barHeight = wHeight / height * wHeight
- var $bar = document.querySelector('.bar')
- $bar.style.height = barHeight + 'px'
- barHeight = $bar.offsetHeight
- var $body = document.querySelector('body')
- window.addEventListener('scroll', function () {
- var total = (wHeight - barHeight) / barHeight
- var progress = $body.scrollTop / (height - wHeight)
- var translate = progress * total * 100
- $bar.style.transform = 'translateY(' + translate + '%)'
- })
- </script></body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement