VPF::Как скриптом скрыть отображение элемента?

Sicky

Дата 29.6.2015, 13:35 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

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

ksnk

Дата 29.6.2015, 13:43 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Что в итоге надо-то? Узнать до какого значения отмотался скроллер основного окна?
Вот так, например.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Sicky

Дата 29.6.2015, 13:56 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

Код


                   <nav class="sq-pads">
                       <ul>
                               <li>
                                       <a href="#"><i class="material-icons md-48">home</i>
                                              <span id="show">Главная</span>
                                            <div class="caption">Главная</div>
                                       </a>
                               </li>
                               <li>
                                      <a href="#"><i class="material-icons md-48">settings</i>
                                              <span>Продукция</span>
                                          <div class="caption">Продукция</div>
                                       </a>
                               </li>
                               <li>
                                       <a href="#"><i class="material-icons md-48">autorenew</i>
                                              <span>Новости</span>
                                           <div class="caption">Новости</div>
                                       </a>
                               </li>
                               <li>
                                       <a href="#"><i class="material-icons md-48">perm_identity</i>
                                              <span>Контакты</span>
                                           <div class="caption">Контакты</div>
                                       </a>
                               </li>

                       </ul>
                </nav>

Код


.sq-pads ul li a span {
    font: 50px "Dosis", sans-serif; text-transform: uppercase;
    position: absolute; left: 134px; top: 3px;
    display: none;
}

.sq-pads ul li a:hover span {
    display: block;
}

Нужно чтобы span не отображался после, например 200px. Я в js совсем плох.

Это сообщение отредактировал(а) Sicky - 29.6.2015, 15:06

Sicky

Дата 29.6.2015, 15:16 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

Код


<script type="text/javascript">
        jQuery(window).scroll(function(){
            if ( jQuery(document).scrollTop() > 5 ) {
                jQuery('.sq-pads ul li a:hover span').css({display: 'none'});
            } else {
                jQuery('.sq-pads ul li a:hover span').css({display: 'block'});
            }
        });
</script>

Что-то вот вроде получилось. Но теперь если не мотать вниз span остается. Что можно сделать?
user posted image

Это сообщение отредактировал(а) Sicky - 29.6.2015, 15:28

ksnk

Дата 29.6.2015, 15:45 (ссылка)

(голосов:1)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Вот так - правильнее.

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Sicky

Дата 29.6.2015, 15:50 (ссылка)

(нет голосов)

Загрузка ...

Новичок

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

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

Спасибо, долго же я мучался!

Shark

Дата 29.6.2015, 22:12 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 703
Регистрация: 18.6.2006
Где: Москва

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

Sicky, если вопрос решен, поставь, пожалуйста, отметку об этом (наверху, где название темы (справо)..

--------------------

Смерть - это только начало...
Агентство недвижимости Premial

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »