Для получения полного доступа
зарегистрируйтесь.
RSS

Все сниппеты с тэгами «JavaScript, Floating Button»



Gravatar image
Илья Понамарёв
  • Репутация: 1
  • Сниппеты: 1
  • Ревизии: 0

Для создания сайтов или веб-приложений в материальном дизайне есть отличный framework Material Design Lite, но он дает лишь основу. Мы попытаемся создать плавающую кнопку, которая будет исчезать при прокрутке страницы вниз и появляться при прокрутке вверх.

Внимание! код не претендует на супер оригинальность, возможно, что-то можно было сделать по-другому, но в своё время было потрачено много времени для изучения подобных мелочей, которые сейчас кажутся простыми. Надеюсь, код кому-нибудь поможет.

Для начала подключим стили и скрипт MDL, а также подлючим JQuery, с помощью которого мы будем реализовывать исчезновение/появление кнопки.

<!--JQuery-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!--MDL-->
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Добавим кнопку на страницу и создадим сss свойства для неё. Остальные классы базовые для фреймворка.

.mdl-float-button {
position:fixed;
right:10px;
bottom:10px;
}

<button class="mdl-float-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
  <i class="material-icons">add</i>
</button>

Теперь кнопка жестко привязана к правому нижнему углу с помощью параметра position:fixed и right:10px;bottom:10px;. Создадим два стиля: первый - это анимация уплывания кнопки вниз, а второй - сворачивание внутрь себя (не знаю как назвать этот эффект).

.scale-zero{                 // сворачивание кнопки
transform: scale(0,0);
transition: all 0.1s linear;
}

.scale-one{                  // разворачивание кнопки
transform: scale(1,1);
transition: all 0.1s linear;
}

.translate-down {           // уплывание вниз кнопки
transform: translate(0,120%);
transition: all 0.1s linear;
}

.translate-up {            // всплывание вверх кнопки
transform: translate(0,0);
transition: all 0.1s linear;
}

Осталось только добавить скрипт, который будет отслеживать скролл страницы и добавлять нужные классы к кнопке

var scroll = $(window).scrollTop();  // переменная, с помощью который мы будем узнавать куда скроллиться страница
$(window).scroll ( function() {     //отслеживаем скроллится ли страница
transform('mdl-float-button','translate-up','translate-down'); //параметры для уплывания кнопки
transform('mdl-float-button','scale-one','scale-zero'); //параметры для сворачивания кнопки
})

function transform (selector,classOne,classTwo) {  // функция, которая определяет куда прокручивается список и добавляет/удаляет нужные классы кнопке
 if ($('.'+selector).length != 0) {
   if ($(window).scrollTop() - 20 > scroll) {    // -20 используется лишь для того, чтобы кнопка пропадала не сразу, а после непродолжительного скролла. Данная штука сделана для красоты
    $('.'+selector).removeClass(classOne);
    $('.'+selector).addClass(classTwo);
    scroll = $(window).scrollTop();
   }
   if ($(window).scrollTop() + 20 < scroll) {  // +20 использется по той же причине, что и выше
    $('.'+selector).removeClass(classTwo);
    $('.'+selector).addClass(classOne);
    scroll = $(window).scrollTop();
   }
 }
}

Вот собственно и всё, что нужно для создания плавающей кнопки.

Рабочий пример

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<style>

.scale-zero{
transform: scale(0,0);
transition: all 0.1s linear;
}

.scale-one{
transform: scale(1,1);
transition: all 0.1s linear;
}

.translate-down {
transform: translate(0,120%);
transition: all 0.1s linear;;
}

.translate-up {
transform: translate(0,0);
transition: all 0.1s linear;;
}

.mdl-float-button {
position:fixed;
right:10px;
bottom:10px;
}

</style>

<button class="mdl-float-button mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
  <i class="material-icons">add</i>
</button>
  
<script>
var scroll = $(window).scrollTop();
$(window).scroll ( function() {
console.log($('#option-1').prop('checked'))
if ($('#option-1').prop('checked')) {transform('mdl-float-button','translate-up','translate-down');}
else {transform('mdl-float-button','scale-one','scale-zero');}
})

function transform (selector,classOne,classTwo) {
 if ($('.'+selector).length != 0) {
   if ($(window).scrollTop()> scroll) {
    $('.'+selector).removeClass(classOne);
    $('.'+selector).addClass(classTwo);
    scroll = $(window).scrollTop();
   }
   if ($(window).scrollTop() < scroll) {
    $('.'+selector).removeClass(classTwo);
    $('.'+selector).addClass(classOne);
    scroll = $(window).scrollTop();
   }
 }
}

</script>