<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<style>
main{
max-width: 480px;
margin: 0 auto;
}
.block_text_2{
padding: 20px;
}
.progress{
width: 10px;
height: 5px;
background-color: burlywood;
position: fixed;
}
</style>
</head>
<body>
<div class="progress"></div>
<main>
<section class="block_text_2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis illo eum commodi autem maxime quae natus et quidem excepturi ea soluta, quas. Reprehenderit impedit iusto provident quo aspernatur, quia, fugit eligendi amet mollitia culpa iure officia maxime! Optio, commodi iure repellat aliquam praesentium totam, aut iste minima magni voluptates architecto at sequi laborum incidunt unde nihil consectetur qui necessitatibus nobis quod. Sint dolorem porro nulla ducimus repellendus tenetur maiores iste iusto, ad. Dignissimos perferendis expedita deleniti, quasi sapiente accusamus sunt. Animi facilis ipsum possimus cupiditate mollitia. Earum, iure impedit amet natus voluptatibus laudantium itaque. Culpa delectus voluptates deleniti voluptatem, iusto repudiandae in. Ullam itaque natus quasi eum, impedit voluptates unde qui vitae consectetur ducimus laboriosam, inventore eligendi incidunt at enim! Incidunt totam libero, quasi expedita non molestias quo eveniet repudiandae quaerat am voluptate repudiandae explicabo nam quos distinctio dignissimos unde. t nesciunt ipsum molestias deleniti harum quibusdam quidem nulla dolores minima cum necessitatibus blanditiis nihil, nemo quo porro? Magni dignissimos ab a voluptatem aliquid inventore dicta non, sed dolore, optio saepe expedita accusamus sunt eos est aliquam ratione, nemo distinctio illo dolorum sequi eaque! Laboriosam dolores quod modi neque beatae, itaque, aperiam expedita eum, illo tempore voluptatum vero delectus dolorum quam soluta ullam natus. Quaerat illo debitis sint recusandae incidunt obcaecati, enim minus non, iste vel minima libero dignissimos molestias assumenda. Laborum consequuntur non, nihil fugit inventore ea provident, voluptate iure illum maiores magnam similique explicabo, temporibus assumenda ullam repellendus nisi, unde nam eaque facilis laudantium corporis. Magni harum, dolor, blanditiis, tempora dolorem provident quasi earum ducimus quidem quam officia aut a. Quae dignissimos similique iure ipsum, mollitia minima accusamus delectus molestias nostrum suscipit quaerat expedita blanditiis eligendi nemo, alias sed. Cupiditate autem, excepturi reiciendis eaque, saepe provident alias! Veniam est quia fugiat enim aliquid magnam cumque eveniet necessitatibus? Odio harum blanditiis amet cumque similique, nostrum animi consequatur. Tempora recusandae esse eligendi cupiditate, laboriosam similique impedit, quidem commodi odit velit inventore fugit sit? Harum aliquam recusandae temporibus. Quas aperiam, pariatur rerum praesentium corporis fugit veritatis distinctio non ea officiis perferendis placeat tempora, repudiandae delectus dolorum culpa cumque eius natus tempore, qui quia quam neque tenetur. Officia in qui dicta porro. Voluptatem quisquam sit commodi hic suscipit velit ea porro, blanditiis nemo dolorum. Ipsa iste veritatis voluptatem sunt sequi nemo libero nulla quo. A, consectetur eos sit officia, culpa, ipsam ea quod, fuga facere dolores quos distinctio id nemo dolore perspiciatis aliquid. Necessitatibus sint commodi a corrupti voluptates repellendus suscipit quisquam quas, aliquam, molestias. Voluptatibus nostrum consequuntur quis impedit iure, repellat natus libero, quae perspiciatis modi in ratione vitae dicta, non illo tempora cupiditate. Itaque atque, maiores eos consequuntur necessitatibus labore? Eius corporis dolores obcaecati quibusdam deleniti, eligendi velit fugit error quasi deserunt sint soluta quae commodi hic nobis blanditiis neque reiciendis accusamus iure aperiam debitis ducimus alias? Deserunt voluptates provident alias sapiente voluptatem architecto, sed, eveniet quae vero nihil nesciunt aut facilis ipsa molestias distinctio officiis, laudantium quas itaque id! Quae corporis, dolores. Nihil esse inventore aliquam libero quos architecto nisi explicabo maiores quia cupiditate, voluptates officia porro? Suscipit sunt delectus molestias dolor aperiam consequatur, asperiores officiis ducimus nisi perspiciatis natus modi odio, libero nulla? Omnis laborum earum quaerat praesentium incidunt at ad sunt quisquam quod, numquam veritatis cumque beatae eaque? Eveniet itaque magni, debitis rem consequuntur aperiam cupiditate porro! Architecto illum doloribus optio distinctio non fugit et consectetur accusamus labore ab debitis obcaecati inventore ipsum quod doloremque itaque nobis vel assumenda, quae corporis impedit dolorem ipsa porro! Blanditiis architecto dolorum, ut aliquam error obcaecati ipsa expedita? Quis nulla distinctio iure tempore ut odio non modi illo facilis. Sit, facilis. Ipsam officiis accusamus voluptate numquam. Reprehenderit enim aspernatur laborum ut voluptatibus soluta porro odit minima nihil delectus? Provident impedit aperiam, qui at nobis veritatis, reprehenderit ad molestias est architecto cupiditate. Dignissimos aspernatur quis repudiandae minus molestias debitis ipsa nobis aut culpa illum saepe laudantium, non repellendus, amet, odit doloribus placeat! Excepturi aperiam quisquam doloremque, possimus mollitia illo earum, quidem quibusdam maxime, repudiandae dolorum. Dignissimos ipsam voluptatibus dolor illum officiis ratione debitis, quia laborum pariatur inventore voluptatum fugiat minus cum delectus itaque, ab sit? Nisi iusto, porro tempora, odio blanditiis fugit magni dolorem nihil esse in dolore? Eos inventore assumenda, beatae ad aliquam quisquam soluta ipsam a atque, fugiat vero neque, hic unde aliquid provident, veniam tenetur modi itaque deserunt voluptatibus! Magnam ipsa fugit voluptatibus, inventore. Nam consectetur commodi illo officiis ipsum dolorem nobis obcaecati porro iste. Sunt nisi error vel maiores tempora, repellat ipsum veniam architecto deserunt dolore temporibus porro obcaecati tenetur iure eveniet facere? Consequatur cupiditate, repudiandae qui at dignissimos temporibus dolor praesentium. Culpa consectetur accusamus nobis enim quibusdam tempora et est fugit, earum quidem obcaecati repudiandae non alias itaque iure, numquam recusandae, id, corporis repellat iusto delectus. Vero veniam, nulla officia temporibus incidunt vitae earum minima beatae totam nam molestiae architecto sit omnis! At, repellat, debitis. Soluta sint, autem magni quia nam consectetur aliquid molestias, iure asperiores repellendus esse neque. Veniam, impedit, recusandae! Voluptas impedit odit laudantium magni dolorem accusamus sint rem. Eaque impedit illo obcaecati minima quisquam ex, similique deserunt suscipit sunt veritatis doloremque alias at officiis esse. A saepe adipisci blanditiis ducimus vero maxime soluta vel dolore distinctio iure doloremque ea hic doloribus, minima provident nam reiciendis molestiae itaque sapiente, nobis sequi, eum tenetur maiores, tempore. Blanditiis doloribus omnis ad, laudantium eius ut mollitia eum aliquid soluta, quos natus excepturi temporibus veniam, ipsa voluptatibus, est atque. Similique facilis saepe magni numquam provident, libero minima inventore placeat nulla, harum ab consequatur quisquam. Animi laudantium suscipit magnam. Nam officiis, hic quis, quam facilis suscipit quae amet ullam itaque dolores cupiditate quod, necessitatibus velit sequi doloribus! Corrupti quasi recusandae corporis rerum. Error dignissimos aut nisi, suscipit reprehenderit, incidunt pariatur officia perspiciatis quia, eos doloribus nesciunt illo provident. Veritatis quod itaque velit quo laudantium ratione in qui, esse totam culpa vitae recusandae, odio consectetur voluptates eveniet distinctio exercitationem quia delectus temporibus aliquid tempore quae praesentium iste. Minus optio molestias nobis consequuntur enim! Magni, saepe. Qui cum autem explicabo accusantium recusandae aperiam ipsum enim fugiat repudiandae quibusdam, saepe deleniti architecto labore unde commodi in. Maxime recusandae impedit quaerat sed eaque corporis porro! Est at recusandae ipsa, repellat quam harum mollitia labore veritatis delectus corporis ab unde saepe, commodi vel asperiores dolores eius repudiandae, dignissimos excepturi rerum earum numquam!
</section>
</main>
<script>
let updateScrollPercentage = function() {
let heightOfWindow = window.innerHeight;
let contentScrolled = window.pageYOffset;
let bodyHeight = document.body.offsetHeight;
let percentage = document.querySelector(".progress");
// let percentageVal = document.querySelector("#percentage-value");
if(bodyHeight - contentScrolled <= heightOfWindow) {
// percentageVal.textContent =
percentage.style.width = "100%"
console.log (`heightOfWindow=${heightOfWindow} contentScrolled=${contentScrolled} bodyHeight=${bodyHeight} percent=100`);
}
else {
let total = bodyHeight - heightOfWindow,
got = contentScrolled,
percent = parseInt((got/total) * 100)
// percentageVal.textContent =
percentage.style.width = percent + "%"
console.log (`heightOfWindow=${heightOfWindow} contentScrolled=${contentScrolled} bodyHeight=${bodyHeight} percent=${percent}`);
}
}
window.addEventListener('scroll', updateScrollPercentage)
</script>
</body>
</html>