Chill-project/chill-bundles
6
0
Fork 0
mirror of https://gitlab.com/Chill-Projet/chill-bundles.git synced 2025-06-07 18:44:08 +00:00
Code Issues Actions Projects Releases Wiki Activity

fix absolute / fixed navbar position

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-05-22 23:42:25 +02:00
parent c7b6788288
commit 1217578202
1 changed files with 80 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

88
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/components/StickyNav.vue
View File

@ -1,6 +1,6 @@
<template>
<teleport to="#content_conainter .container.content .container">
<div class="sticky-section" id="navmap">
<div id="navmap">
<nav>
<a href="#top">
<i class="fa fa-fw fa-square-o"></i>
@ -44,32 +44,104 @@
</template>
<script>
const stickyNav = document.querySelector('#navmap');
export default {
name: "StickyNav",
data() {
return {
header: document.querySelector("header.navigation.container"),
bannerName: document.querySelector("#header-accompanying_course-name"),
bannerDetails: document.querySelector("#header-accompanying_course-details"),
stickyNav: null,
sumBanner: null
}
},
computed: {
accompanyingCourse() {
return this.$store.state.accompanyingCourse
},
top() {
//return window.getComputedStyle(this.stickyNav).getPropertyValue('top'); //
return 30; //px
},
//sumBanner() {
// return this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
//}
},
mounted() {
this.bing();
this.ready();
window.addEventListener('scroll', this.handleScroll); // scroll de la souris
},
destroyed() {
window.removeEventListener('scroll', this.handleScroll); // scroll de la souris
},
methods: {
bing() {
console.log('coucou');
ready() {
this.stickyNav = document.querySelector('#navmap');
this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
const resizeObserver = new ResizeObserver(entries => { // FF/Chrome!
console.log('header', this.header.offsetHeight);
//this.header = this.header.offsetHeight;
console.log('bannerName', this.bannerName.offsetHeight);
//this.bannerName = this.bannerName.offsetHeight;
console.log('bannerDetails', this.bannerDetails.offsetHeight);
//this.bannerDetails = this.bannerDetails.offsetHeight;
this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
console.log('sum', this.sumBanner);
console.log('--');
});
resizeObserver.observe(this.header);
resizeObserver.observe(this.bannerName);
resizeObserver.observe(this.bannerDetails);
},
handleScroll(event) {
//console.log('top !!', this.top);
//console.log(this.stickyNav);
let pos = this.findPosition(this.stickyNav);
//console.log(window.scrollY);
console.log('sum2', this.sumBanner);
let top = this.sumBanner + this.top - window.scrollY; //pos['y']
if (top > 25) {
console.log('absolute', pos['y']);
this.stickyNav.style.position = 'absolute';
this.stickyNav.style.left = '-60px';
} else {
console.log('fixed', pos['y']);
this.stickyNav.style.position = 'fixed';
this.stickyNav.style.left = pos['x'] + 'px';
}
},
findPosition(element) {
let posX = 0, posY = 0;
do {
posX += element.offsetLeft;
posY += element.offsetTop;
element = element.offsetParent;
}
while( element != null );
let pos = [];
pos['x'] = posX;
pos['y'] = posY;
return pos;
}
}
}
</script>
<style lang="scss" scoped>
div.sticky-section {
div#navmap {
position: absolute;
top: 33px;
left: -10%;
top: 30px;
left: -60px; //-10%;
nav {
font-size: small;
a {