Индикатор прокрутки страницы. Scrolling Progress Bar

Не так давно я заметил индикатор прокрутки страницы на блоге Binance, очень понравилась эта фишка. Желтая полоска под фиксированным меню, двигающаяся во время скроллинга страницы. Она отображает прогресс чтения текста. Похожая вещь мне также попалась на глаза во время чтения одной из статей на площадке telegraph. Именно тогда я понял, что очень хочу реализовать это на своем блоге.

Этот пост будет очень интересным для тех кто любит WordPress. Помимо реализации Scrolling Progress Bar, я покажу возможности своего wordpress шаблона. Расскажу про функционал элементов и хуков. А также покажу как правильно использовать jQuery в WordPress. Особенно будет полезно для тех, кто не понимает почему у него не работают на блоге скрипты jQuery. Я думаю будет круто. Данный пост я буду всегда рад пополнить исходя из ваших проблемных вопросов в комментариях.

Индикатор прокрутки страницы

Сам код индикатора я довольно быстро нашёл в интернете, выглядел он примерно следующим образом.

<progress value="0">
<div class="progress-container">
<span class="progress-bar"></span>
</div>
</progress>

Это непосредственно стили, здесь я только изменил цвет самого индикатора, а также добавил «z-index: 100» — это было актуально для моего шаблона, чтобы сам бар находился выше других возможных слоев.

progress{
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:5px;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border:none;
    background:transparent;
    color: #56a348;
    z-index: 100;
}
progress::-webkit-progress-bar{
    background:transparent;
    border-radius:5px;
}
progress::-webkit-progress-value{
    background:#56a348;
    border-radius:5px;
}
progress::-moz-progress-bar{
    background:#002c68;
    border-radius:5px;
}
.progress-container{
    width:100%;
    background:transparent;
    position:fixed;
    top:0;
    left:0;
    height:5px;
    display:block;
}
.progress-bar{
    background:#002c68;
    width:0%;
    display:block;
    height:inherit;
}

Ну и собственно сам jQuery, то место где происходит всё волшебство.

$(function() {
$(window).on("scroll resize", function() {
var o = $(window).scrollTop() / ($(document).height() - $(window).height());
$(".progress-bar").css({
"width": (100 * o | 0) + "%"
});
$('progress')[0].value = o;
})
});

Почему jQuery может не работать в WordPress?

Многие пробуют запустить куски кода jQuery и у них ничего не работает, после чего они его начинают подключать его шапке и вроде как проблема решается, я раньше сам так делал. Вот только это не правильно. Дело в том, что WordPress поставляется с уже предустановленной в ядре библиотекой, которую вам необходимо использовать в своем коде. Проблема кроется в режиме совместимости, в котором вам нельзя использоваться в сценариях псевдонимом идентификатора $, т.е. код должен выглядеть следующим образом:

jQuery(function() { 
jQuery(window).on("scroll resize", function() { 
var o = $(window).scrollTop() / (jQuery(document).height() - jQuery(window).height()); 
jQuery(".progress-bar").css({ "width": (100 * o | 0) + "%" }); 
jQuery('progress')[0].value = o; }) });

Соответственно из за этого он становится громоздким и совершенно не читаемым. И правильнее будет сделать вот так:

(function($) {

Тут мы добавляем наш код с псевдонимом идентификатора $

})(jQuery);

На выходе получаем рабочий jQuery код способный без проблем работать в нашем WordPress.

(function($) {  
 $(function() {
$(window).on("scroll resize", function() {
var o = $(window).scrollTop() / ($(document).height() - $(window).height());
$(".progress-bar").css({
"width": (100 * o | 0) + "%"
});
$('progress')[0].value = o;
})
}); 
})(jQuery);

Тема GeneratePress для WordPress и его хуки

За 8 лет на данном блоге я перепробовал целую кучу различных тем(шаблонов). И скажу вам честно, что тема GeneratePress — это лучшее что случалось с моим блогом. Я не буду сейчас останавливать подробно на обзоре данного шаблона. Это тема не одного поста. В дальнейшем я планирую делать основной упор в рубрике wordpress именно на этот шаблон, рассказывая о его функционале и о том как с ним работать.

На моём блоге есть главное меню, которое фиксируется при скроллинге страницы вниз. Именно туда я хочу поместить мой индикатор прокрутки страницы. И для этого в функционале GeneratePress есть специальные элементы с возможностью вставки хуков. Выглядит это так:

Индикатор прокрутки страницы

Хук: generate_inside_navigation

С помощью хуков я легко вставляю любой текст, код и шорткод в нужное место моего шаблона. В данном примере хук определяет место в фиксированном меню, как раз там где мне это нужно.

generate_inside_navigation

Элементы шаблона GeneratePress

Работать с подобным функционалом крайне удобно. Есть возможность выставить правила, где будет срабатывать данный хук. То есть на каких страницах (или на всём сайте, админке и т.д.). А также у каких пользователей (всех или только зарегистрированных). К примеру, когда я примеряю на блог какой то новый интерактив, я обязательно создаю правила отработки данного хука (только у администратора). Тем самым другие пользователи его попросту не видят. И только после того как я добился нужного результата и уверен в том, что все работает отлично и без багов, я открываю его для всех пользователей! Таким образом, я как админ вижу свой блог совершенно иначе, с некоторыми вещами я могу работать неделями по 5 минут в день. И как только я что-то из них заканчиваю, пускаю на всеобщее обозрение. Это удобно!

Вот только некоторые элементы из того что работает на блоге на блоге:

элементы generatepress

 


Каналы и чаты в Telegram

Дневник Джека если вы любите криптовалюты, то этот Telegram канал для вас. Только дельные советы, когда купить, что купить, какие монеты лучше, всё это и не только на моем телеграм канале. А самое главное как всегда бесплатно

Чат Криптовалюта все любители криптовалют добро пожаловать!

Канал HYIP PW специально для админов HYIP-проектов, да и не только... я там публикую все свои секреты :)

Чат HYIP если вам знакомы такие вещи как H-Script, GoldCoders, HSbuilder ждём вас в нашем чате HYIP админов.


Рубрики !Code> | Wordpress Метки # # # #

7 комментариев к “Индикатор прокрутки страницы. Scrolling Progress Bar”

    • Дополнения GP Premium можно купить или скачать в интернете бесплатно! Тут тебя уже решать каким путем идти. Из огромного количества дополнений, тебе требуется ELEMENTS. На официальном сайте все дополнения идут сразу.

      Ответить
      • Я пока что для себя ничего не покупал! Скачал бесплатно на торренте и пользуюсь. В дальнейшем, если данный шаблон меня полностью устроит, а пока что я от него в восторге, я обязательно приобрету честный премиум и буду получать всевозможные обновления функционала без проблем! Ну а пока я тестирую

        Ответить
        • А если в слитых шаблонах дыры? Опасаться этого вполне можно, сайт может упасть в выдаче или быть взломан?

          Ответить

Оставьте комментарий