6899 shaares
24 results
tagged
snippet
const { length, 0: first, [length - 1]: last } = arr;
.full-width {
width: 100vw;
margin-left: 50%;
transform: translate3d(-50%, 0, 0);
}
Or a responsive approach with CSS grid:
.wrapper {
display: grid;
grid-template-columns:
[full-start] 1fr [wrapper-start]
minmax(0, 70rem) [wrapper-end] 1fr [full-end];
/* Optional gap */
column-gap: var(--pad, 1rem);
}
Then
.wrapper > * {
grid-column: wrapper;
}
.wrapper > .full-width {
grid-column: full;
}
const currentSection = ref()
onMounted(() => {
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if(entry.intersectionRatio > 0) {
currentSection.value = entry.target.getAttribute('id')
}
})
document.querySelectorAll('article h2').forEach((section) => {
observer.observe(section)
})
})
then add a class to the active currentSection.