Появление кнопки при прокрутке страницы?

Question

[SpideR-KOSS]

Есть кнопка.
<button><a class="knopka">Кнопка</a></button>
Как сделать чтобы кнопка появлялась только при прокрутке окна например на 20px?

Answer 1

[Илья]

codepen

Comments

[SpideR-KOSS]

Большое спасибо, все работает!

[SpideR-KOSS]

А вот на телефоне почему-то событие не срабатывает. :-)

[rinatoptimus]

SpideR-KOSS, обратите внимание, что св-во display не анимируется. Если хотите плавного появления, нужно немного поправить так:

.knopka {
 opacity: 0;
 position: fixed;
 left: 10px;
 transition: all 1s ease-in-out;
 }

if (window.pageYOffset > 20) {
      btn.style.opacity = '1';
    } else { btn.style.opacity = '0'; }

[SpideR-KOSS]

rinatoptimus, спасибо! Мне бы touchmove задействовать, ибо onscroll в мобильниках не срабатывает.

[Максим]

rinatoptimus, то же столкнулся с такой проблемой, не пойму, где прописать это условие.

Answer 2

[Максим Бондарев]

$(window).scroll(function (event) {
    var top = $(window).scrollTop();
     if(top >= 20){
     //show btn
     } else {
     //hide btn
     }
});

Comments

[SpideR-KOSS]

Большое спасибо!