Доработать кнопку Scroll-to-Top
Сейчас зафиксирована на 96px от нижней части экрана.
У страницы есть футер высотой 64px.
Задача:
1. Опустить кнопку на высоту 32px от нижней части экрана, на котором ешё нет футера.
2. При достижении футера кнопка должна останавливаться на расстоянии 32px от него.
То есть подниматься одновременно с футером.
И при полностью видимом футере быть на высоте 96px.
Поведение похоже на sticky, но кнопка не должна добавлять никаких пикселей.
Пример того. что должно получиться тут: https://fonts.google.com/icons?selected=Material+I...
В откликах просьба указать цену, за которую можете сделать.
И если можете что-то оптимизировать в компоненте, тоже сообщите, пожалуйста.
Вот сам сниппет:
<template>
<transition name="fade">
<button v-show="isVisible"
:class="$style.button"
@click="scrollToTop">
<svg width="14" height="14" viewBox="0 0 16 16">
<path fill="none" d="M-4-4h24v24H-4z"/>
<path d="M0 8l1.41 1.41L7 3.83V16h2V3.83l5.58 5.59L16 8 8 0z"/>
</svg>
</button>
</transition>
</template>
<script>
export default {
props: {
offset: {
type: Number,
default: 500,
},
},
data() {
return {
isVisible: false
};
},
mounted() {
this.checkScrollVisibility();
window.addEventListener('scroll', this.checkScrollVisibility);
},
destroyed() {
window.removeEventListener('scroll', this.checkScrollVisibility);
},
methods: {
checkScrollVisibility() {
this.isVisible = window.pageYOffset > this.offset;
},
scrollToTop() {
window.scroll({top: 0, left: 0, behavior: 'smooth'});
}
}
};
</script>
<style lang="scss" module>
.button {
position: fixed;
bottom: 96px;
right: 300px;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
background-color: #fff;
border-radius: 50%;
transition: opacity .2s ease, transform .2s ease, background-color .2s ease;
transform: scale(1);
cursor: pointer;
&:hover {
background-color: black;
& > svg {
fill: #fff;
}
}
& > svg {
fill: black;
transition: fill .2s ease;
}
}
</style>