За последние 24 часа нас посетили 17313 программистов и 1199 роботов. Сейчас ищет 1251 программист ...

Исчезновение кликабельной ссылки после пересечения класса div

Тема в разделе "HTML и CSS", создана пользователем panikajo, 8 май 2018.

  1. panikajo

    panikajo Новичок

    С нами с:
    28 дек 2017
    Сообщения:
    18
    Симпатии:
    0
    Привет всем.
    Крч малая идейка настигла только хз как реализовать).
    Есть у меня иконка с боку сайта кликабельная
    вот ее код
    Код (Text):
    1.        <ul class="footer-social-links footer-social-links__rounded list-inline text-center">                      
    2. <li>
    3.                             <a href="https://vk.com/boostgamers" target="_blank" title="VK"><i class="fa fa-vk"></i></a>
    4.                         </li>
    5. </ul>
    Если надо еще css приложу.
    Вообщем надо чтобы эта иконка исчезала если пользователь находиться в самом вверху сайта.
    Т.е
    если пользователь находиться выше этого класса
    <div class="top-wrapper top-wrapper__bg1" id="top">
    то иконка пропадает., но как только он опускается ниже ее то она появляется.
     
  2. TeslaFeo

    TeslaFeo Старожил

    С нами с:
    9 мар 2016
    Сообщения:
    2.984
    Симпатии:
    759
    Гугли "js координаты элементов"
     
    panikajo нравится это.
  3. paschaopencart

    paschaopencart Активный пользователь

    С нами с:
    18 май 2018
    Сообщения:
    118
    Симпатии:
    16
    Адрес:
    Урал
    все просто)))
    присваиваем id и класс блока для вашей иконки (либо по аналогии используйте существующий)
    например я добавлю
    Код (Text):
    1. class="default"
    и пропишу скрипт такого вида
    Код (Text):
    1. <script>
    2. $(document).ready(function(){
    3.         var $menu = $("#scroll-block");
    4.         $(window).scroll(function(){
    5.             if ( $(this).scrollTop() > 100 && $menu.hasClass("default") ){
    6.                 $menu.removeClass("default").addClass("new");
    7.             } else if($(this).scrollTop() <= 100 && $menu.hasClass("new")) {
    8.                 $menu.removeClass("new").addClass("default");
    9.             }
    10.         });//scroll
    11.     });
    12. </script>
    расшифруем скрипт
    1. ищем блок с ID - scroll-block
    2. когда страница полностью отображена класс у блока с иконкой default
    при прокрутке страницы на 100px вниз - класс меняется на new
    3. при прокрутке страницы назад вверх, классы снова взаимозаменяются
    дело осталось за малым, скроем блок изначально стилем
    Код (Text):
    1.  .default {
    2. display: none
    3. }
    и пропишем какие то свои стили для того же дива, когда он поменяет свой класс при прокрутке, к примеру
    Код (Text):
    1.  .new {
    2. display: block;
    3. color: #FFF;
    4. background: #ccc;
    5. }
    или какие то свои стили... как пожелаете
     
    panikajo нравится это.