fix bottom page exception + listen size changes too in main container

This commit is contained in:
Mathieu Jaumotte 2021-05-23 11:47:01 +02:00
parent 1fbda740a7
commit 2386a35eb7

View File

@ -34,6 +34,7 @@ export default {
header: document.querySelector("header.navigation.container"),
bannerName: document.querySelector("#header-accompanying_course-name"),
bannerDetails: document.querySelector("#header-accompanying_course-details"),
container: null,
sumBanner: null,
stickyNav: null,
limit: 25,
@ -63,6 +64,7 @@ export default {
ready() {
// 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;
@ -70,12 +72,11 @@ export default {
const resizeObserver = new ResizeObserver(entries => {
// Listen to header size changes,
// then recalculate height sum and anchorsMap
// 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('sum', this.sumBanner);
//console.log('calculate sum', this.sumBanner);
this.items = [];
this.anchorsMap();
@ -84,6 +85,7 @@ export default {
resizeObserver.observe(this.header);
resizeObserver.observe(this.bannerName);
resizeObserver.observe(this.bannerDetails);
resizeObserver.observe(this.container);
},
anchorsMap() {
@ -96,8 +98,7 @@ export default {
pos: this.findPosition(anchor)['y'],
active: false,
key: parseInt(anchor.name.slice(8).slice(0, -1)),
name: '#' + anchor.name,
anchor: anchor
name: '#' + anchor.name
})
});
//console.log('items', this.items);
@ -143,9 +144,15 @@ export default {
let next = (this.items[i+1]) ? this.items[i+1].pos : '1000000';
item.active =
(window.scrollY >= item.pos & window.scrollY < next) ? true : false;
}, this);
// last item never switch active because scroll reach bottom of page
if (document.body.scrollHeight == window.scrollY + window.innerHeight) {
this.items[this.items.length-1].active = true;
this.items[this.items.length-2].active = false;
} else {
this.items[this.items.length-1].active = false;
}
}
}
}