Как добавить полосу скроллинга вверху страницы

Как создать индикатор скроллинга страницы в WordPress с помощью плагина jQuery Scroller.js – очень просто! Сперва скопируйте сам js код или скачайте его с github.

Если вы решили просто скопировать код, держите. Сохраняйте его в свою папку с вашим шаблоном.

/*
* Scrolline.js - Create an indication bar line of scroll position
* Basic usage : $.scrolline();
* ---
* Version: 1.0
* Copyright 2014, Anthony Ly (http://anthonyly.com)
* Released under the MIT Licence
*/

(function($, window, document, undefined) {
    $.extend({
        scrolline: function (options) {
            var defaults = {
                backColor   : '#ecf0f1',
                direction   : 'horizontal',
                frontColor  : '#2ecc71',
                opacity     : 1,
                position    : 'top',
                reverse     : false,
                weight      : 5,
                zindex      : 10,
                scrollEnd   : function() {}
            };

            function Plugin(options) {
                this.params = $.extend(defaults, options);
                this.$back = $(document.createElement('div'));
                this.$front = $(document.createElement('div'));
                this.init();
            }

            Plugin.prototype = {
                init : function() {
                    var self = this,
                        tBack, rBack, bBack, lBack, bgBack,
                        tFront, rFront, bFront, lFront, bgFront;

                    // Direction and position
                    if(self.params.direction != 'vertical') self.params.direction = 'horizontal';
                    if(self.params.direction == 'vertical' && self.params.position != 'right') self.params.position = 'left';
                    if(self.params.direction == 'horizontal' && self.params.position != 'bottom') self.params.position = 'top';

                    if(self.params.direction == 'vertical') {
                        bBack = tBack = 0;
                        if(self.params.position == 'right') {
                            rBack = 0;
                            lBack = 'auto';
                        } else {
                            rBack = 'auto';
                            lBack = 0;
                        }
                    } else {
                        rBack = lBack = 0;
                        if(self.params.position == 'bottom') {
                            tBack = 'auto';
                            bBack = 0;
                        } else {
                            tBack =  0;
                            bBack = 'auto';
                        }
                    }

                    if(self.params.reverse && self.params.reverse === true) {
                        if(self.params.direction == 'vertical') {
                            bFront = rFront = lFront = 0;
                            tFront = 'auto';
                        } else {
                            bFront = rFront = rFront = 0;
                            lFront = 'auto';
                        }
                    } else {
                        tFront = lFront = 0;
                        bFront = rFront = 'auto';
                    }

                    self.$front.css({
                        background : self.params.frontColor,
                        bottom : bFront,
                        height : 0,
                        left : lFront,
                        margin: 0,
                        overflow: 'hidden',
                        padding: 0,
                        position: 'absolute',
                        right : rFront,
                        top: tFront,
                        width : 0
                    }).appendTo(self.$back);

                    self.$back.css({
                        background : self.params.backColor,
                        bottom: bBack,
                        height : 0,
                        left : lBack,
                        opacity: self.params.opacity,
                        margin: 0,
                        overflow: 'hidden',
                        position: 'fixed',
                        padding: 0,
                        right : rBack,
                        top: tBack,
                        width : 0,
                        zIndex : self.params.zindex,
                    }).appendTo('body');

                    $(window).on("load resize scroll orientationchange", function() {
                        self.scrollListener();
                    });
                },

                scrollListener : function() {
                    var self = this,
                        hWin = $(window).height(),
                        wWin = $(window).width(),
                        hDoc = $(document).height(),
                        scrollValue = $(window).scrollTop(),
                        wBack, hBack, wFront, hFront, scrollineVal, wRef;

                    if(self.params.direction == 'vertical') {
                        scrollineVal = (scrollValue + hWin) * hWin / hDoc;
                        wBack = self.params.weight;
                        hBack = wRef = hWin;
                        wFront = self.params.weight;
                        hFront = scrollineVal;
                    } else {
                        scrollineVal = (scrollValue + hWin) * wWin / hDoc;
                        wBack = wRef = wWin;
                        hBack = self.params.weight;
                        wFront = scrollineVal;
                        hFront = self.params.weight;
                    }

                    self.$back.css({
                        height: hBack,
                        width: wBack
                    });
                    self.$front.css({
                        height: hFront,
                        width: wFront
                    });

                    if(scrollineVal >= wRef) {
                        self.params.scrollEnd();
                    }
                }
            };

            new Plugin(options);
        }
    });
})(jQuery, window, document);

 

Подключаем Scroller.js

Я не хотел выводить его на всех страницах блога, а только в постах, для этого мы в файле functions.php добавим условие с проверкой, которое будет подключать Scroller.js только тогда, когда в браузере будет открыта страница с постом, а на остальных мы просто не будем подключать данный js скрипт.

Для этого в ваш файл functions.php вставьте следующий код, там, где у вас подключаются стили:

	// Добавляем скроллинг вверху страницы
	if (is_single()) {
		wp_enqueue_script('scroller', get_template_directory_uri().'/assets/js/scroller.js');
	}

 

Обязательно смените пути, если вы не размещаете в теже папки, как у меня.

Выводим скроллинг на странице

Как говорит нам документация нам необходимо просто вызвать функцию $.scrolline();  на той странице, где мы хотим его видеть. Как я уже говорил ранее, я буду использовать его только на страницах с полною записью, шаблон single.php.

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

<?php 
if (is_single()) { ?>
<script>
	jQuery(function($){
			$.scrolline({
			    reverse : false,
			    position : 'top',
			    backColor : '#ffffff',
			    frontColor : '#43a047',
			    weight : 8
						}); 

	});

</script>
<? } ?>

Опции Scroller.js

Вы можете применить набор дополнительных опций:

backColor — определение цвета прокрутки — задний фон (по умолчанию «# ecf0f1»)
direction — может быть вертикальным или горизонтальным (по умолчанию «горизонтально»)
frontColor — определение цвета полосы скрола (по умолчанию «# 2ecc71»)
opacity — определение прозрачности, значение должно быть между 0 и 1 (по умолчанию 1)
position — Определите положение прокрутки: сверху и снизу для горизонтального положения, влево или вправо для вертикального положения (по умолчанию верхний по горизонтали и слева по вертикали)
reverse — вернуть значение фронтальной линии на заданное значение в true (по умолчанию false)
weight — определение большей длины прокрутки по пикселям (по умолчанию 5)
zindex — При необходимости измените значение z-индекса (по умолчанию 10)
scrollEnd — вызов функции обратного вызова в конце прокрутки

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *