Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Sticky плагин, Помогите с написанием плагина 
:(
    Опции темы
JIamer
Дата 15.7.2017, 16:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 1
Регистрация: 15.7.2017

Репутация: нет
Всего: нет



Доброго времени суток всем. Я верстальщик и захотелось мне написать плагин для собственных нужд, чтобы быть в нем на все 100% уверенным быть и JS заодно подкачать.  Хочу сделать все на data атрибутах и опциях, передаваемых с ними. Прохожу по всем элементам 1 раз при инициализации, создаю объект для каждого sticky элемента, туда записываю опции, присваиваю объект в массив values, а при вызове метода render он проходит уже по массиву values. Проблема в том, что в методе render при выводе values в нем сохраняется только последний объект. В JS я + - 0, так что любые советы по организации кода тоже приветствуются. Заранее спасибо.

Код

var Sticky = function(values) {
        var mainOffset = 0;

        Sticky.prototype.detach = function () {

        };

        Sticky.prototype.destroy = function () {

        };

        Sticky.prototype.render = function () {
            var bodyScrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

            console.log(values);
            for (var key in values) {
                console.log( "Ключ: " + key + " значение: " + values[key] );

                // if (bodyScrollTop > values[key].stickyOffsetTop) {
                //     console.log("свсвс");
                // }
            }



        };

    };



    function stickyInit(){
        var stickyArr = document.querySelectorAll('[data-sticky]');
        var stickysLenght = stickyArr.length;
        var values = [];
        console.log('xzxzxz');
        for (var i = 0; i < stickysLenght; i++) {
            var stickyItem = stickyArr[i];

            // var placeholder = sticky.parentNode;
            // $(sticky).wrap("<div class='sticky-placeholder'></div>");

            var stickyEl = new Sticky({
                stickInParent: $(stickyItem).data("sticky").stickInParent,
                stickyOffsetTop : stickyItem.offsetTop
            });


            values.push(stickyEl);

        }

        window.addEventListener('scroll', function(e) {
            stickyEl.render();
        });

        return values;
    }

PM MAIL   Вверх
Google
  Дата 21.7.2017, 01:49 (ссылка)  





  Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Здесь публикуют скрипты, которые уже проверены в обсуждениях других тем (при этом полезно поставить ссылки на все смежные обсуждения) или переносятся кем-либо из модераторов по просьбе участников, если видно, что в результате обсуждения темы был написан полезный или интересный скрипт. Третий возможный вариант - участник форума публикует скрипт, заведомо известный как полезный и эффективный, для, возможно, небольшой доработки и обсуждения.
 
2 Пользователей читают эту тему (2 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Наши скрипты | Следующая тема »


 




[ Время генерации скрипта: 0.2315 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.