Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Как скриптом скрыть отображение элемента?

Автор: Sicky 29.6.2015, 13:35

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

Автор: ksnk 29.6.2015, 13:43

Что в итоге надо-то? Узнать до какого значения отмотался скроллер основного окна?
http://truemisha.ru/blog/javascript/scroll-position.html, например.

Автор: Sicky 29.6.2015, 13:56

Код


                   <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:16

Код


<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

Автор: ksnk 29.6.2015, 15:45

https://jsfiddle.net/vma7s7qp/ - правильнее.

Автор: Sicky 29.6.2015, 15:50

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

Автор: Shark 29.6.2015, 22:12

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