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

corrections

Browse Source
This commit is contained in:
Mathieu Jaumotte 2021-05-23 12:55:57 +02:00
parent bf576e171c
commit 64e37c5235
2 changed files with 14 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Bundle/ChillPersonBundle/Resources/public/vuejs/AccompanyingCourse/App.vue
View File

@ -71,7 +71,7 @@ export default {
}
a[name^="section"] {
position: absolute;
top: -4em;
top: -3.5em; // ref. stickNav
}
}
padding: 0.8em 0em;

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

@ -2,8 +2,8 @@
<teleport to="#content_conainter .container.content .container">
<div id="navmap">
<nav>
<a href="#top">
<i class="fa fa-fw fa-square-o"></i>
<a class="top" href="#top">
<i class="fa fa-fw fa-square"></i>
<span>{{ $t('nav.top') }}</span>
</a>
<item
@ -12,10 +12,6 @@
:item="item"
:step="step">
</item>
<!--a href="#bottom">
<i class="fa fa-fw fa-square-o"></i>
<span>{{ $t('nav.bottom') }}</span>
</a-->
</nav>
</div>
</teleport>
@ -66,22 +62,20 @@ export default {
// when mounted ready
this.container = document.querySelector("#content_conainter .container.content .container");
this.stickyNav = document.querySelector('#navmap');
this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
this.anchorsMap();
// TODO resizeObserver not supports IE !
// Listen when elements change size, then recalculate height sum and anchorsMap
const resizeObserver = new ResizeObserver(entries => {
// Listen to elements resize changes, then recalculate height sum and anchorsMap
// TODO only FF/Chrome!
this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
//console.log('calculate sum', this.sumBanner);
this.items = [];
this.anchorsMap();
});
resizeObserver.observe(this.header);
resizeObserver.observe(this.bannerName);
resizeObserver.observe(this.bannerDetails);
@ -101,15 +95,14 @@ export default {
name: '#' + anchor.name
})
});
//console.log('items', this.items);
},
handleScroll(event) {
let pos = this.findPosition(this.stickyNav);
//console.log(window.scrollY);
//console.log('sum2', this.sumBanner);
let top = this.sumBanner + this.top - window.scrollY;
//console.log(window.scrollY);
if (top > this.limit) {
//console.log('absolute', pos['y']);
this.stickyNav.style.position = 'absolute';
@ -141,7 +134,7 @@ export default {
switchActive() {
this.items.forEach((item, i) => {
let next = (this.items[i+1]) ? this.items[i+1].pos : '1000000';
let next = (this.items[i+1]) ? this.items[i+1].pos : '100000';
item.active =
(window.scrollY >= item.pos & window.scrollY < next) ? true : false;
}, this);
@ -170,6 +163,9 @@ div#navmap {
box-sizing: border-box;
margin-bottom: -3px;
color: #71859669;
&.top {
color: #718596;
}
span {
display: none;
}
@ -184,7 +180,7 @@ div#navmap {
color: #718596b5;
}
&.active {
color: #df6a27; //#e2793d
color: #e2793d;
}
}
}