Скролл по странице
<style>
main{
max-width: 480px;
margin: 0 auto;
}
.block_text_2{
padding: 20px;
}
.progress{
width: 10px;
height: 5px;
background-color: burlywood;
position: fixed;
}
</style>
<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>
window.onscroll = function(){
let progress = document.querySelector(".progress");
let scrollTop = window.pageYOffset;
progress.style.width = scrollTop;
console.log(scrollTop);
}
</script>
</body>
Вроде все правильно сделал а значение он не подставляет |
progress.style.width = scrollTop + 'px';
P.S. https://learn.javascript.ru/introduc...deventlistener Цитата:
|
Цитата:
И спасибо за ссылку я почитаю, но то что я задумал сделать это лишь начало, я просто учусь, хочу реализовать скрипт. |
Nexus,
window.addEventListener = function(){
let progress = document.querySelector(".progress");
let scrollTop = window.pageYOffset;
let heightBody = document.querySelector("body").scrollHeight;
heightBody = heightBody / 100;
heightBody = Math.round(heightBody);
progress.style.width = scrollTop + "px";
console.log(heightBody);
}
сделал addEventListener и почему то не работает |
И я не могу сообразить как сделать.
Мне нужно что бы при скроле вниз верхний блок <div class="progress"></div> заполнялся когда да скролится до самого низа он был на 100% только с объяснением, без объяснение я нашел скрипт пробую его понять |
Цитата:
let test = function(){
let progress = document.querySelector(".progress");
let scrollTop = window.pageYOffset;
let heightBody = document.querySelector("body").scrollHeight;
/*heightBody = heightBody / 100;
heightBody = Math.round(heightBody);*/
progress.style.width = scrollTop + "px";
console.log(heightBody);
}
window.addEventListener('scroll', test)
|
let updateScrollPercentage = function() {
let heightOfWindow = window.innerHeight;
let contentScrolled = window.pageYOffset;
let bodyHeight = document.body.offsetHeight;
let percentage = document.querySelector(".percentage");
let percentageVal = document.querySelector("#percentage-value");
if(bodyHeight - contentScrolled <= heightOfWindow) {
percentageVal.textContent = percentage.style.width = "100%"
}
else {
let total = bodyHeight - heightOfWindow,
got = contentScrolled,
percent = parseInt((got/total) * 100)
percentageVal.textContent = percentage.style.width = percent + "%"
}
}
window.addEventListener('scroll', updateScrollPercentage)
Я вот переменные не все могу понять, и что такое total Я прочитал о них но как то не понятно. |
Цитата:
|
let heightOfWindow = window.innerHeight;
... let bodyHeight = document.body.offsetHeight; .... let total = bodyHeight - heightOfWindow, Значит не понятно, что такое innerHeight и offsetHeight Я обычно делаю так google и далее mdn innerHeight https://www.google.com/search?q=mdn+innerHeight mdn offsetHeight https://www.google.com/search?q=mdn+offsetHeight |
voraa,
я прочитал и поискал информацию прежде чем обратится сюда, для меня форум это последнее место, так устроено что есть люди который самоутверждаются за счет новичков и начинаю вести себя мерзко и надменно, по этому я пишу только уже когда потрачена много времени на самостоятельный поиск.
let updateScrollPercentage = function() {
let heightOfWindow = window.innerHeight;
let contentScrolled = window.pageYOffset;
let bodyHeight = document.body.offsetHeight;
let percentage = document.querySelector(".percentage");
let percentageVal = document.querySelector("#percentage-value");
if(bodyHeight - contentScrolled <= heightOfWindow) {
percentageVal.textContent = percentage.style.width = "100%"
}
else {
let total = bodyHeight - heightOfWindow;
let got = contentScrolled;
let percent = parseInt((got/total) * 100);
percentageVal.textContent = percentage.style.width = percent + "%"
}
}
window.addEventListener('scroll', updateScrollPercentage)
Я пытаюсь понять условия функции берем высоту элемента вычитает проскороленые значение и если они меньше или равны видимой части окна то из блока заменяем контент на ширину блока и присваивает 100 процентов, что это такое? в другом случае получаем переменную где высота элемента с вычетом видимой части окна еще переменная которая показывает на сколько проскролено еще переменная где я перевожу в цифры, первую перменую деленаую на вторую и умноженую на 100 и дальше строка тоже ставит меня в тупик. |
Ну тут очевидно человек хотел сделать отдельное поле с id='percentage-value', что бы выводить туда численное значение %, но забыл. Это, конечно, ошибка
Надо так
let updateScrollPercentage = function() {
let heightOfWindow = window.innerHeight;
let contentScrolled = window.pageYOffset;
let bodyHeight = document.body.offsetHeight;
let percentage = document.querySelector(".percentage");
if(bodyHeight - contentScrolled <= heightOfWindow) {
percentage.style.width = "100%"
}
else {
let total = bodyHeight - heightOfWindow;
let got = contentScrolled;
let percent = parseInt((got/total) * 100);
percentage.style.width = percent + "%"
}
}
window.addEventListener('scroll', updateScrollPercentage)
берем высоту элемента вычитает проскороленые значение и если они меньше или равны видимой части окна то из блока заменяем контент на ширину блока и присваивает 100 процентов, что это такое? Ну тут берем ту часть документа, которая видна в окне просмотра (bodyHeight - contentScrolled) и, если ее высота меньше высоты окна просмотра, то прокручивать больше нельзя, поэтому - 100%. Иначе let total = bodyHeight - heightOfWindow; - какая часть документа не влезает в окно просмотра let got = contentScrolled; - какая часть документа находится вверху, т.е. на сколько прокрутили. Ну и далее берем % |
<!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>
|
Сергей Ракипов,
наличие условия в данной функции, это попытка скомпенсировать ошибку вычисления процента при приближении к 100% (максимальная прокрутка). при хорошо подобранных параметрах данное условие не требуется. |
Всем спасибо какая то яснов в голове появляется, буду разбираться дальше.
|
Цитата:
Достаточно изменить высоту браузера и случай уже будет другой. И параметры станут "нехорошими" |
Цитата:
|
scroll индикатор прокрутки
:write:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<style>
main{
max-width: 480px;
margin: 0 auto;
}
.block_text_2{
padding: 20px;
}
.progress{
width: 0px;
height: 5px;
background-color: burlywood;
position: fixed;
}
body{
height: 3000px;
margin: 0;
}
</style>
<body>
<div class="percentage progress" id="percentage-value">0%</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>
const maxScroll = () => ["Height","Width"].map(value => {
const doc = document.documentElement,
scroll = doc[`scroll${value}`],
client = doc[`client${value}`];
return Math.max(scroll, client) - client;
})
console.log()
const updateScrollPercentage = function() {
const [total, _] = maxScroll(),
contentScrolled = window.pageYOffset,
percentage = document.querySelector(".percentage"),
percentageVal = document.querySelector("#percentage-value"),
percent = Math.round(contentScrolled/total * 100);
percentageVal.textContent = percentage.style.width = percent + "%";
}
window.addEventListener('scroll', updateScrollPercentage)
</script>
</body>
</html>
|
Всем спасибо разобрался
вот что я хотел
<!doctype html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>index</title>
<link rel="shortcut icon" href="img/favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="index">
<meta name="Keywords" content="index">
<style>
*{
margin: 0;
padding: 0;
}
body{
font-family: Verdana, Geneva CY, Helvetica, DejaVu Sans, Arial, sans-serif;
font-size: .8rem;
line-height: 160%;
}
main{
max-width: 480px;
margin: 0 auto;
}
.fact{
color: #fff;
font-size: .6rem;
font-style: italic;
position: fixed;
top: 50%;
left: 10px;
line-height: -2rem;
background-color:lightsalmon;
padding: 20px;
display: none;
}
#scroll-percentage {
position: fixed;
top: 0;
left: 0;
height: 100vh;
color: #000;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
z-index: 2;
}
#scroll-percentage .percentage {
display: inline-block;
background-color:#ff530d;
border-right: 4px solid burlywood;
height: 0;
width: 4px;
box-sizing: content-box;
}
#percentage-value {
box-sizing: content-box;
position: fixed;
bottom: 20px;
left: 20px;
height: 30px;
width: 30px;
color: #fff;
background-color: burlywood;
text-align: center;
line-height: 30px;
border: 1px solid burlywood;
z-index: 2;
}
</style>
</head>
<body>
<div id="scroll-percentage">
<div class="percentage"></div>
</div>
<div id="percentage-value">0%</div>
<div class="fact">
1949 Раймондо Бухер 30 метров
</div>
<main>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam, exercitationem est blanditiis aliquam ullam incidunt, saepe fugit laboriosam, voluptatum architecto reprehenderit mollitia magni qui! Magnam nobis quas aliquid tenetur incidunt dignissimos accusantium ex impedit dicta voluptatem culpa, deserunt ducimus corporis quis debitis, vitae iusto enim dolorum numquam error ea ipsum dolore. Fuga voluptates quos corporis accusantium qui beatae, repellendus, saepe assumenda recusandae voluptatem maiores eum! Sequi temporibus voluptatibus animi facilis quos aliquid, velit vel eos molestias impedit ullam officiis obcaecati excepturi nesciunt ipsa laudantium perferendis, consequatur provident? Accusantium dolor numquam, aut optio, fugiat debitis accusamus voluptatum sed. Saepe possimus dolore qui nemo libero rerum iusto debitis facilis voluptas exercitationem deserunt eum corrupti quos aut officia, adipisci, rem sunt dolores, nulla recusandae cum temporibus ipsum? Eius modi voluptatum libero dicta, ipsa natus, facilis, nulla maxime reiciendis sapiente nobis magnam magni quasi voluptate debitis nemo ipsum recusandae alias vel peut quos officia nulla! Maxime repellendus dolore eum consectetur, alias repudiandae soluta nam culpa fuga ipsam cumque reiciendis minus saepe quae veritatis voluptate? Cumque debitis perferendis aut. Natus reiciendis dolorem cupiditate ipsam labore ipsa voluptates, assumenda dicta deserunt culpa ad vitae, corrupti saepe officiis, omnis doloremque quidem eaque quisquam! Libero facere voluptatem velit quas earum neque sapiente maxime quaerat perferendis itaque officia dolores, architecto aliquid, numquam eaque nemo quisquam obcaecati repudiandae. Aspernatur asperiores sint soluta illum aliquid, consectetur, similique. Deserunt possimus reiciendis eveniet inventore. Ea odit fugit delectus optio voluptatum enim laudantium facilis odio inventore fuga dolorum ratione aut, rerum molestias eveniet officiis, voluptatem incidunt, at repudiandae dicta quis ex commodi ducimus error sequi? Sapiente neque maxime officiis exercitationem possimus non culpa corporis, deserunt unde. Maiores qui deserunt, numquam neque illo maxime quasi porro iure eius veniam voluptate fugiat nulla, tempore mollitia culpa velit. Vitae maiores sit ipsa asperiores consequatur veritatis odio quae eligendi, doloremque quo. Enim similique tempora iure a cupiditate minus voluptatum ex, minima voluptatibus velit, magnam inventore possimus, adipisci architecto, soluta expedita eligendi totam illum rerum. Eum accusamus cumque officia, pariatur, et tenetur totam veritatis reprehenderit facere assumenda distinctio, odit provident corporis saepe repudiandae atque commodi quis rerum expedita blanditiis ratione ex. Accusantium consequatur ipsam laboriosam quasi consectetur neque odio voluptatem quaerat rerum culpa est suscipit autem, praesentium repudiandae veritatis eius veniam commodi aliquam magnam possimus libero sapiente sit non excepturi. Eum sed assumenda voluptatum dolore ullam, ratione adipisci. Quibusdam praesentium veniam, asperiores id, unde eaque beatae delectus. Sint pariatur adipisci voluptas aliquam reprehenderit modi animi, cupiditate laboriosam, dolorem magni veritatis doloribus deleniti voluptate vel neque optio. Deleniti ipsum autem quas ex natus obcaecati ipsa iure! Aut a, ea quia natus placeat odio est, blanditiis culpa! Necessitatibus minima molestiae sint, reiciendis dignissimos quos, quaerat adipisci ea iusto dolorum, assumenda nisi ducimus nemo placeat quam accusamus possimus itaque sed ad provident. Perferendis quasi voluptates non inventore porro placeat alias odit delectus at voluptatibus deleniti, illum iure velit, eligendi est asperiores saepe quibusdam expedita dolores rem enim quod maiores nostrum. Dicta earum, voluptates numquam similique dolorem necessitatibus repudiandae ab praesentium at eum voluptatem hic accusantium quos officia, enim, maiores obcaecati neque sunt animi quis dolores commodi? Reprehenderit error vero quam incidunt quasi ducimus voluptatum enim doloribus eaque illo modi non maiores, illum neque iusto, totam saepe necessitatibus inventore aut? Magnam, ut quisquam neque eaque sequi rerum omnis aliquid, minus ab quas nihil tempora vel harum debitis quidem praesentium, voluptates dolorum laudantium libero. Voluptatibus cupiditate consequuntur, quaerat molestiae doloremque ex est fuga officia nostrum, quam commodi assumenda ad ea nemo vel iusto fugit molestias facilis. Obcaecati iusto libero expedita consequatur facere odio. Sit quas repellat facere aut voluptas amet voluptate, vitae quae necessitatibus reiciendis consequuntur laboriosam nam cum debitis culpa sint dignissimos autem unde porro doloribus! Sint assumenda sequi doloremque recusandae, rem iure quae nesciunt dolorem voluptates ut earum dolores, iste beatae quaerat possimus accusantium quam ea. Perspiciatis magnam tempora aperiam, quisquam necessitatibus beatae nesciunt laborum maxime odio fuga id nam similique, corrupti iste quis quidem illum atque sit tenetur ipsa eligendi laudantium. Quisquam minus ut, cum sapiente, architecto, animi veniam omnis dolore, perspiciatis asperiores voluptate magni veritatis ad sunt molestias adipisci provident fugiat id quae fugit velit aliquid repudiandae quam? Harum velit minima ullam neque quidem. Ad beatae, similique quae repellat suscipit nam fugit molestias unde nesciunt voluptas accusantium, labore iure enim atque omnis, architecto error porro cupiditate reiciendis rem vitae! Amet quidem, blanditiis eaque. Eligendi rem alias eos esse aliquid, debitis dignissimos illum, odit voluptas ea officia. Laboriosam fugiat velit, debitis incidunt cum, nam culpa esse dicta, totam necessitatibus assumenda aspernatur quaerat hic illum consectetur sit recusandae obcaecati amet commodi sequi repudiandae earum tenetur ad nobis aliquam. In, cupiditate, officiis! Deserunt hic temporibus in, perspiciatis dolorem similique quisquam aut minima obcaecati cupiditate dicta officiis omnis. Cupiditate nemo inventore nobis mollitia dolor voluptatem quam voluptas unde voluptates qui excepturi eius debitis modi quidem, non optio quas esse fugit minus porro ad quis quia incidunt veniam! Animi inventore consequuntur pariatur id molestiae illum est reiciendis dolores nemo? Voluptate tempora ducimus eos incidunt? Illum, veniam, rerum a reprehenderit aperiam repellendus ducimus minima expedita odit saepe amet alias temporibus, possimus quas cupiditate nam consequatur repudiandae ut optio asperiores modi aliquid accusamus quam! Quaerat rem aspernatur suscipit.
</main>
<script>
let updateScrollPercentage = function() {
let heightOfWindow = window.innerHeight;
let contentScrolled = window.pageYOffset;
let bodyHeight = document.body.offsetHeight;
let percentage = document.querySelector(".percentage");
let percentageVal = document.querySelector("#percentage-value");
let fact = document.querySelector(".fact");
if(bodyHeight - contentScrolled <= heightOfWindow) {
percentageVal.textContent = percentage.style.height = "100%"
}
else {
let total = bodyHeight - heightOfWindow;
let got = contentScrolled;
let percent = parseInt((got/total) * 100);
percentageVal.textContent = percentage.style.height = percent + "%";
if (percent>=20 && percent<=30){
fact.style.display = "block";
}
else{
fact.style.display = "none";
}
}
}
window.addEventListener('scroll', updateScrollPercentage)
</script>
</body>
</html>
У меня вопросы есть ощущение кто как то не по людский написано. почему когда я переменные выношу за функцию они не работаю, они же глобальными должны быть И как записать когда будет .fact не один (конечно они будет с id) что бы проще и красивее и как этих фактов сделать появление плавным. |
Сергей Ракипов,
добавьте параметр run в тег форматирования html пост #18. например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
|
Сергей Ракипов,
ок |
Цитата:
<script>
let percentage = document.querySelector(".percentage");
let percentageVal = document.querySelector("#percentage-value");
let fact = document.querySelector(".fact");
let updateScrollPercentage = function() {
let heightOfWindow = window.innerHeight;
let contentScrolled = window.pageYOffset;
let bodyHeight = document.body.offsetHeight;
if(bodyHeight - contentScrolled <= heightOfWindow) {
percentageVal.textContent = percentage.style.height = "100%"
}
else {
let total = bodyHeight - heightOfWindow;
let got = contentScrolled;
let percent = parseInt((got/total) * 100);
percentageVal.textContent = percentage.style.height = percent + "%";
if (percent>=20 && percent<=30){
fact.style.display = "block";
}
else{
fact.style.display = "none";
}
}
}
window.addEventListener('scroll', updateScrollPercentage)
</script>
|
Цитата:
|
Цитата:
и у меня есть ощущение что это коряво когда в одной функции написано if else с разными так сказать действиями одно отвечает за процент а втрое за ввод. и как добавить плавности |
Цитата:
|
Цитата:
Для того, чтобы вычислить процент прокрутки у элемента, вам следует текущее значение прокрутки разделить на максимально возможное.
const progress = document.querySelector("progress");
function scrollHandler() {
const p = document.body.scrollTop / (document.body.scrollHeight - document.body.clientHeight);
progress.value = p;
}
addEventListener("load", scrollHandler);
document.body.addEventListener("scroll", scrollHandler);
Чтобы прокрутка у элемента заработала, вам следует указать размеры элемента (иначе прокрутка у элемента не будет, а только у корневого элемента)
html, body {
height: 100%;
overflow: auto;
margin: 0;
}
Цитата:
Цитата:
Исправленный пример — https://codepen.io/Malleys/pen/RwWowmd?editors=1000 |
Цитата:
|
А как прочитать эту запись
let scrollTop = window.pageYOffset ? window.pageYOffset : (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); pageYOffset я понимаю что на сколько окно браузера было проскорелно scrollTop на сколько элемент было проскролено. но вот языком нормальным не могу сказать что значит эта запись |
function sticky(){
let scrollTop = window.pageYOffset ? window.pageYOffset : (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
if(scrollTop >= 0 & scrollTop <= 220){
imgArticle.style.position = "absolute";
imgArticle.style.top = "220";
}
else if(scrollTop >= 220 & scrollTop <= 500){
imgArticle.style.position = "fixed";
imgArticle.style.top = "0";
}
else{
imgArticle.style.position = "absolute";
imgArticle.style.top = "280" + "px";
}
}
window.addEventListener("scroll", sticky);
Почему если я выношу эту переменную за функцию let scrollTop = window.pageYOffset ? window.pageYOffset : (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); то функция не работает |
Цитата:
изменений не вносилось, значит будет значение на момент создания. |
Цитата:
|
Цитата:
а можно ли как то написать код что бы была так сказать всегда считывала новые значение без мыши или это логический бред. |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 06:00. |