Процент для прокрутки страниц сайта
 | |
| Отличный вариант прокрутки, которая правильно отслеживает, если на сайте длинные по описанию страниц, а точнее выводит процент при движение. Который можно задействовать на сайте, если мы видим один из примеров, это виртуальность, где ставится оттенок цвета в горизонтальный вид, но при прокрутки он заполняет страницу. То здесь у веб мастера появляется много вариантов, где его разместить, но и безусловно сделать красивое оформление на математическом исчислении. Многие пользователи или гости портала обычно задаются вопросом, сколько еще осталось, чтоб дочитать все до конца. Вот здесь как раз индикатор процентной прокрутки может использоваться для предоставления процента страницы, оставленной для чтения, и это увеличивает общее восприятие пользователем. В этом материале предоставлен самый простой и удобный способ создания индикатора прокрутки в процентах. Дело в том, что при открытие страницы или заходе на сайт вы видите такое табло, где по умолчанию выставлено ноль. Но только начнете просмотр страницы и опускать ее ниже, как автоматически процент станет повышаться, и вы доходите до самого низа, и на таблице высветило 100 процентов. Вот поэтому, когда вы прокручиваете и начинаете видеть элемент внизу, процент должен составлять около 1%, а когда элемент почти исчезает в верхней части, он должен составлять около намного больше. Создание процентного показателя прокрутки веб-страницы Первым делом подключаем библиотеку, это у кого нет на сайте. Код <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> HTML Код <body> <p id="prokru-kastran"></p> <p id="saytenkastranitsy">Scroll Percentage: <span>0</span>%</p> </body> CSS Код #prokru-kastran { height: 6000px; width: 1px; } #saytenkastranitsy { font-family: Impact; font-size: 48px; color: #232135; background: rgba(212, 210, 210, 0.5); padding: 20px; position: absolute; top: 50%; left: 50%; box-shadow: 1px 9px 1px 0px rgba(58, 54, 54, 0.26); border-radius: 7px; } JS Код $(document).ready(function() { $(window).scroll(function(e){ var scrollTop = $(window).scrollTop(); var docHeight = $(document).height(); var winHeight = $(window).height(); var scrollPercent = (scrollTop) / (docHeight - winHeight); var scrollPercentRounded = Math.round(scrollPercent*100); $('#saytenkastranitsy>span').html(scrollPercentRounded); repositionLabel(); }); $(window).resize(function(){ repositionLabel(); }); function repositionLabel() { $('#saytenkastranitsy').css({ position:'fixed', left: ($(window).width() - $('#saytenkastranitsy').outerWidth()) / 2, top: (($(window).height() - $('#saytenkastranitsy').outerHeight()) / 2) - $('#saytenkastranitsy').height() }); } repositionLabel(); }); Также можете все изначально посмотреть процент прокрутки на экране, используя HTML CSS и JavaScript. Это черновой материал, так как сделан без всякого дизайна. И кому то покажется не очень то стильный, но это вы сами можете все красиво отредактировать, что стильно будет смотреться на сайте, где безусловно отличается от других. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
