coup de polish
This commit is contained in:
@@ -114,25 +114,35 @@
|
||||
} else if (document.querySelector('.offre-content')) {
|
||||
fluoButtons = document.querySelectorAll('.liens_fixed > div, .file_fixed > div > div');
|
||||
} else if (document.querySelector('.projets')) {
|
||||
fluoButtons = document.querySelectorAll('.file_fixed > div > div > div, .liens > div > div > div');
|
||||
fluoButtons = document.querySelectorAll('.file_fixed > div > div, .liens > div > div > div');
|
||||
} else {
|
||||
fluoButtons = document.querySelectorAll('.liens_fixed > div > div:not(.visually-hidden), .file_fixed > div > div, .liens > div > div');
|
||||
}
|
||||
|
||||
let footer = document.querySelector('#footer_top');
|
||||
function positionFluoLinks() {
|
||||
// if window is more than 960px
|
||||
let footer = document.querySelector('footer');
|
||||
|
||||
function positionFluoLinks(scrollTop) {
|
||||
for (let i = fluoButtons.length; i > 0 ; i--) {
|
||||
if (window.innerWidth > 1080) {
|
||||
const layoutContainerEl = document.querySelector('.layout-container');
|
||||
let pageScrollableHeight = layoutContainerEl.offsetHeight;
|
||||
let prevButtonBottom = fluoButtons[i] ? parseInt(fluoButtons[i].style.bottom) : 0;
|
||||
let prevButtonHeight = fluoButtons[i] ? fluoButtons[i].offsetHeight : 0;
|
||||
fluoButtons[i - 1].style.position = 'fixed';
|
||||
fluoButtons[i - 1].style.left = document.querySelector('.projets') ? '76vw' : '75vw';
|
||||
if (footer.offsetTop < window.innerHeight + window.scrollY && i === fluoButtons.length) {
|
||||
fluoButtons[i - 1].style.bottom = `${window.innerHeight - footer.offsetTop + window.scrollY + 30}px`;
|
||||
/* console.log(`
|
||||
pageScrollableHeight: ${pageScrollableHeight},
|
||||
footer.offsetHeight: ${footer.offsetHeight},
|
||||
window.innerHeight: ${window.innerHeight},
|
||||
scrollTop: ${scrollTop}
|
||||
`); */
|
||||
|
||||
if (pageScrollableHeight - footer.offsetHeight < window.innerHeight + scrollTop && i === fluoButtons.length) {
|
||||
let margin = document.querySelector('.projets') ? 15 : 30;
|
||||
fluoButtons[i - 1].style.bottom = `${window.innerHeight - footer.offsetTop + scrollTop + margin}px`;
|
||||
} else {
|
||||
fluoButtons[i - 1].style.bottom = i === fluoButtons.length ? '30px' : `${prevButtonBottom + prevButtonHeight + 15}px`;
|
||||
let margin = document.querySelector('.projets') ? 0 : 15;
|
||||
fluoButtons[i - 1].style.bottom = i === fluoButtons.length ? '30px' : `${prevButtonBottom + prevButtonHeight + margin}px`;
|
||||
}
|
||||
} else {
|
||||
fluoButtons[i - 1].style.position = 'relative';
|
||||
@@ -146,9 +156,10 @@
|
||||
for (let lien of liens) {
|
||||
lien.setAttribute('target', '_blank');
|
||||
}
|
||||
|
||||
positionFluoLinks();
|
||||
document.addEventListener('scroll', () => {
|
||||
positionFluoLinks();
|
||||
document.body.addEventListener('scroll', (e) => {
|
||||
positionFluoLinks(e.target.scrollTop);
|
||||
});
|
||||
window.addEventListener('resize', () => {
|
||||
positionFluoLinks();
|
||||
@@ -325,50 +336,25 @@
|
||||
//
|
||||
// set bg middle placement
|
||||
//
|
||||
setBgContainer();
|
||||
setBgMiddlePlacement();
|
||||
setBgBottomPlacement();
|
||||
let pageHeight = document.querySelector('.layout-container').offsetHeight;
|
||||
toggleBgMiddle(pageHeight)
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
setBgMiddlePlacement();
|
||||
setBgBottomPlacement();
|
||||
setBgContainer();
|
||||
});
|
||||
pageHeight = document.querySelector('.layout-container').offsetHeight;
|
||||
toggleBgMiddle(pageHeight);
|
||||
})
|
||||
|
||||
function setBgContainer() {
|
||||
const bg = document.querySelector('#background');
|
||||
const pageHeight = document.documentElement.scrollHeight;
|
||||
|
||||
bg.style.height = `${pageHeight}px`;
|
||||
}
|
||||
|
||||
function setBgMiddlePlacement() {
|
||||
const bgMiddleImgs = document.querySelectorAll('#bg-middle img');
|
||||
const carousel = document.querySelector('.carousel_container');
|
||||
const pageHeight = document.documentElement.scrollHeight;
|
||||
for (let img of bgMiddleImgs) {
|
||||
if (carousel) {
|
||||
img.style.paddingTop = `${carousel.offsetHeight}px`;
|
||||
} else {
|
||||
img.style.paddingTop = `${pageHeight / 2}px`;
|
||||
}
|
||||
}
|
||||
function toggleBgMiddle(pageHeight) {
|
||||
const bgMiddle = document.querySelector('#bg-middle');
|
||||
const bgOnze = document.querySelector('#bg-11');
|
||||
if (pageHeight < 2000) {
|
||||
const bgMiddle = document.querySelector('#bg-middle');
|
||||
bgMiddle.style.display = 'none';
|
||||
bgOnze.style.display = 'none';
|
||||
} else {
|
||||
bgMiddle.style.display = 'block';
|
||||
bgOnze.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
function setBgBottomPlacement() {
|
||||
const bgBottomImgs = document.querySelectorAll('#bg-bottom img');
|
||||
const pageHeight = document.documentElement.scrollHeight;
|
||||
|
||||
for (let img of bgBottomImgs) {
|
||||
img.style.paddingTop = `${pageHeight}px`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user