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';
|
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>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="main-container">
|
<div class="main-container" :class="stickyClass">
|
||||||
<RouterView />
|
<RouterView />
|
||||||
<Footer></Footer>
|
<Footer></Footer>
|
||||||
</div>
|
</div>
|
||||||
@ -41,5 +69,9 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.has-sticky & {
|
||||||
|
margin-top: 120px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -6,8 +6,9 @@ export default {
|
|||||||
type: String,
|
type: String,
|
||||||
title: String,
|
title: String,
|
||||||
},
|
},
|
||||||
components: { LocaleSelector }
|
components: { LocaleSelector },
|
||||||
}
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -36,6 +37,7 @@ export default {
|
|||||||
height: 574px;
|
height: 574px;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
|
transition: background-color .3s ease-in-out;
|
||||||
|
|
||||||
.overlay {
|
.overlay {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -108,5 +110,24 @@ export default {
|
|||||||
background: transparent;
|
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>
|
</style>
|
Loading…
x
Reference in New Issue
Block a user