Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.11.2016, 12:56
Интересующийся
Отправить личное сообщение для vittoS Посмотреть профиль Найти все сообщения от vittoS
 
Регистрация: 05.11.2016
Сообщений: 10

Упростить скрипт на JQuery
Всем привет!
В JS совсем юн, а использовать надо. Изучаю потихоньку его, но пишу свои простые скрипты пока на JQuery. Поэтому, не судите строго студента. У меня вопрос к более опытным и знающим. Работаю над сайтом.Задача стоит чтобы при скроллинге header изменял высоту и размер логотипа. Написал код:
//    header scroll
    $(window).scroll(function() {
        if ($(this).scrollTop() > 1) { 
            $('.navigation').hide(),
            $('.header').addClass('header_sticky'),
            $('.header__logo').addClass('header__logo_sticky'),
            $('.header__switch').show('drop', { direction: 'right' });
        } else {
            $('.navigation').show(),
            $('.header').removeClass('header_sticky'),
            $('.header__logo').removeClass('header__logo_sticky'),
            $('.header__switch').hide('drop', { direction: 'right' });
        }
    }); // end header scroll


Вопрос такой,
во-первых: правильно ли (синтаксически) перечислять команды через запятую (Изначально через ";" было. Но я так сделал потому что ошибку искать начал. Ошибка:header дергался, небольшой зазор в 1px сверху начал появляться-исчезать. Начал отлаживать, мучался, дошёл до инструкции if else попробовал через запятую прописать. И вроде дергаться перестал)

и во-вторых: Как можно этот код упростить? мне кажется он слишком громоздкий и не совсем верный хоть и рабочий.

Был бы признателен за помощь)
P.s: ну и в идеале (извините за наглость, конешно) было бы интересно на ванильном JS этот код посмотреть
Ответить с цитированием
  #2 (permalink)  
Старый 09.11.2016, 01:17
Профессор
Отправить личное сообщение для psiklop Посмотреть профиль Найти все сообщения от psiklop
 
Регистрация: 04.03.2015
Сообщений: 163

на JS было бы так
document.getElementsByClassName('header')[0].style.display = "none";
document.getElementsByClassName('header')[0].classList.add('header_sticky');
через запятую вроде можно, хотя как то странно всегда ; ставят
Ответить с цитированием
  #3 (permalink)  
Старый 11.11.2016, 10:43
Интересующийся
Отправить личное сообщение для vittoS Посмотреть профиль Найти все сообщения от vittoS
 
Регистрация: 05.11.2016
Сообщений: 10

Сообщение от psiklop Посмотреть сообщение
на JS было бы так
document.getElementsByClassName('header')[0].style.display = "none";
document.getElementsByClassName('header')[0].classList.add('header_sticky');
через запятую вроде можно, хотя как то странно всегда ; ставят
Спасибо! Вот только не понял куда это вставить? Так же в $(window).scroll(function() - if else? И почему "display = 'block'"?? хедер ведь тогда вообще исчезнет? И какую роль играет нулевой индекс массива [0] после объявления класса?
В общем в чистом виде не работает (Заранее извиняюсь за возможное незнание каких то простых вещей. Я в JS совсем зеленый)
Ответить с цитированием
  #4 (permalink)  
Старый 11.11.2016, 10:48
Интересующийся
Отправить личное сообщение для vittoS Посмотреть профиль Найти все сообщения от vittoS
 
Регистрация: 05.11.2016
Сообщений: 10

Сообщение от psiklop Посмотреть сообщение
на JS было бы так
document.getElementsByClassName('header')[0].style.display = "none";
document.getElementsByClassName('header')[0].classList.add('header_sticky');
через запятую вроде можно, хотя как то странно всегда ; ставят
//    header scroll
    $(window).scroll(function() {
        if ($(this).scrollTop() > 1) { 
            //document.getElementsByClassName('header')[0].style.display = "none";   
            document.getElementsByClassName('header')[0].classList.add('header_sticky');   
        } else {
            document.getElementsByClassName('header')[0].classList.remove('header_sticky'); 
        }
    }); // end header scroll


Я вот как попробовал.
Ответить с цитированием
  #5 (permalink)  
Старый 11.11.2016, 11:19
Интересующийся
Отправить личное сообщение для vittoS Посмотреть профиль Найти все сообщения от vittoS
 
Регистрация: 05.11.2016
Сообщений: 10

Сообщение от psiklop Посмотреть сообщение
на JS было бы так
document.getElementsByClassName('header')[0].style.display = "none";
document.getElementsByClassName('header')[0].classList.add('header_sticky');
через запятую вроде можно, хотя как то странно всегда ; ставят
Кажется до меня начинает доходить по чуть чуть. Переписал так:
//    header scroll
    $(window).scroll(function() {
        if ($(this).scrollTop() > 1) { 
            document.getElementsByClassName('navigation')[0].style.display = "none";   
            document.getElementsByClassName('header')[0].classList.add('header_sticky');
            document.getElementsByClassName('logo')[0].classList.add('logo_sticky'); 
            document.getElementsByClassName('header__switch')[0].style.display = "block";
        } else {
            document.getElementsByClassName('navigation')[0].style.display = "block";
            document.getElementsByClassName('header')[0].classList.remove('header_sticky'); 
            document.getElementsByClassName('logo')[0].classList.remove('logo_sticky'); 
            document.getElementsByClassName('header__switch')[0].style.display = "none";
        }
    }); // end header scroll


А как добавить плавности исчезновению? И что значит нулевой индекс массива ([0]) после объявления селектора класса в инструкции?
Ответить с цитированием
  #6 (permalink)  
Старый 11.11.2016, 11:21
Аватар для ksa
ksa ksa на форуме
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,134

Сообщение от vittoS
И что значит нулевой индекс массива ([0]) после объявления селектора класса в инструкции?
Метод getElementsByClassName() возвращает массив элементов, а тебе нужен первый.
Ответить с цитированием
  #7 (permalink)  
Старый 19.11.2016, 15:18
Интересующийся
Отправить личное сообщение для vittoS Посмотреть профиль Найти все сообщения от vittoS
 
Регистрация: 05.11.2016
Сообщений: 10

Сообщение от ksa Посмотреть сообщение
Метод getElementsByClassName() возвращает массив элементов, а тебе нужен первый.
Спасибо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как упростить скрипт движения картинки zawm Элементы интерфейса 1 18.07.2015 10:33
Не срабатывает скрипт jQuery Heidel jQuery 2 22.09.2012 18:05
[Работа] Два модальных окна на JQuery VictorM Работа 3 14.08.2012 23:09
Не работает скрипт JQuery в IE7 only_dimon Internet Explorer 5 11.08.2012 00:29
Скрипт на jQuery NeoMurderer jQuery 7 09.03.2011 18:16