This commit is contained in:
Mathieu Jaumotte 2021-05-23 00:05:52 +02:00
parent 6ee03b7ebb
commit 4261ddcde4

View File

@ -54,7 +54,7 @@ export default {
bannerDetails: document.querySelector("#header-accompanying_course-details"), bannerDetails: document.querySelector("#header-accompanying_course-details"),
stickyNav: null, stickyNav: null,
sumBanner: null, sumBanner: null,
top: null limit: 25
} }
}, },
computed: { computed: {
@ -81,13 +81,12 @@ export default {
const resizeObserver = new ResizeObserver(entries => { // FF/Chrome! const resizeObserver = new ResizeObserver(entries => { // FF/Chrome!
console.log('header', this.header.offsetHeight); //console.log('header', this.header.offsetHeight);
console.log('bannerName', this.bannerName.offsetHeight); //console.log('bannerName', this.bannerName.offsetHeight);
console.log('bannerDetails', this.bannerDetails.offsetHeight); //console.log('bannerDetails', this.bannerDetails.offsetHeight);
this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight; this.sumBanner = this.header.offsetHeight + this.bannerName.offsetHeight + this.bannerDetails.offsetHeight;
console.log('sum', this.sumBanner); //console.log('sum', this.sumBanner);
console.log('--'); //console.log('--');
}); });
resizeObserver.observe(this.header); resizeObserver.observe(this.header);
@ -97,23 +96,23 @@ export default {
}, },
handleScroll(event) { handleScroll(event) {
//console.log('top !!', this.top);
//console.log(this.stickyNav);
let pos = this.findPosition(this.stickyNav); let pos = this.findPosition(this.stickyNav);
//console.log(window.scrollY); //console.log(window.scrollY);
console.log('sum2', this.sumBanner); //console.log('sum2', this.sumBanner);
let top = this.sumBanner + this.top - window.scrollY; //pos['y'] let top = this.sumBanner + this.top - window.scrollY;
if (top > 25) { if (top > this.limit) {
console.log('absolute', pos['y']); //console.log('absolute', pos['y']);
this.stickyNav.style.position = 'absolute'; this.stickyNav.style.position = 'absolute';
this.stickyNav.style.left = '-60px'; this.stickyNav.style.left = '-60px';
} else { } else {
console.log('fixed', pos['y']); //console.log('fixed', pos['y']);
this.stickyNav.style.position = 'fixed'; this.stickyNav.style.position = 'fixed';
this.stickyNav.style.left = pos['x'] + 'px'; this.stickyNav.style.left = pos['x'] + 'px';
} }
}, },
findPosition(element) { findPosition(element) {
let posX = 0, posY = 0; let posX = 0, posY = 0;
do { do {
posX += element.offsetLeft; posX += element.offsetLeft;