adding sticky header
This commit is contained in:
parent
4935692742
commit
fc3fa21b51
36
src/App.vue
36
src/App.vue
@ -1,9 +1,37 @@
|
||||
<script setup>
|
||||
<script>
|
||||
import Footer from './components/Footer.vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sticky: false
|
||||
}
|
||||
},
|
||||
components: { Footer },
|
||||
created() {
|
||||
window.addEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
destroyed() {
|
||||
window.removeEventListener('scroll', this.handleScroll);
|
||||
},
|
||||
computed: {
|
||||
stickyClass() {
|
||||
return `${this.sticky ? 'has-sticky' : ''}`;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleScroll() {
|
||||
if (this.$route.name === 'contact') {
|
||||
return false;
|
||||
}
|
||||
this.sticky = window.scrollY > 60;
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<div class="main-container" :class="stickyClass">
|
||||
<RouterView />
|
||||
<Footer></Footer>
|
||||
</div>
|
||||
@ -41,5 +69,9 @@
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.has-sticky & {
|
||||
margin-top: 120px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
@ -6,8 +6,9 @@ export default {
|
||||
type: String,
|
||||
title: String,
|
||||
},
|
||||
components: { LocaleSelector }
|
||||
components: { LocaleSelector },
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -36,6 +37,7 @@ export default {
|
||||
height: 574px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
transition: background-color .3s ease-in-out;
|
||||
|
||||
.overlay {
|
||||
width: 100%;
|
||||
@ -108,5 +110,24 @@ export default {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.has-sticky & {
|
||||
background-color: #121212;
|
||||
background-image: none;
|
||||
height: 120px;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 1000;
|
||||
width: 100%;
|
||||
.overlay {
|
||||
background: #000;
|
||||
width: 1366px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
Loading…
x
Reference in New Issue
Block a user