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