Новые изменения в компоенты
This commit is contained in:
parent
0c6c8fe4d8
commit
214988af13
2 changed files with 34 additions and 5 deletions
|
|
@ -28,7 +28,14 @@ const { items } = Astro.props;
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<style is:global>
|
<style is:global>
|
||||||
.toc-container { width: 100%; }
|
.toc-container {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 1.5rem;
|
||||||
|
transition: margin-top 0.3s ease;
|
||||||
|
}
|
||||||
|
.toc-container.no-top-margin {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
}
|
||||||
.toc-nav {
|
.toc-nav {
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
border-radius: 1.25rem;
|
border-radius: 1.25rem;
|
||||||
|
|
@ -108,6 +115,29 @@ const { items } = Astro.props;
|
||||||
const toc = document.getElementById('toc-sidebar');
|
const toc = document.getElementById('toc-sidebar');
|
||||||
if (!toc) return;
|
if (!toc) return;
|
||||||
|
|
||||||
|
let lastScrollY = window.scrollY;
|
||||||
|
let ticking = false;
|
||||||
|
|
||||||
|
const updateMargin = () => {
|
||||||
|
const currentScrollY = window.scrollY;
|
||||||
|
// При скролле ВНИЗ - убрать отступ
|
||||||
|
if (currentScrollY > lastScrollY) {
|
||||||
|
toc.classList.add('no-top-margin');
|
||||||
|
} else {
|
||||||
|
// При скролле ВВЕРХ или начальная позиция - вернуть отступ
|
||||||
|
toc.classList.remove('no-top-margin');
|
||||||
|
}
|
||||||
|
lastScrollY = currentScrollY;
|
||||||
|
ticking = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
window.addEventListener('scroll', () => {
|
||||||
|
if (!ticking) {
|
||||||
|
requestAnimationFrame(() => updateMargin());
|
||||||
|
ticking = true;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
const items = toc.querySelectorAll('.toc-item');
|
const items = toc.querySelectorAll('.toc-item');
|
||||||
const links = toc.querySelectorAll<HTMLAnchorElement>('.toc-link');
|
const links = toc.querySelectorAll<HTMLAnchorElement>('.toc-link');
|
||||||
const HEADER_OFFSET = 120; // Высота хедера + запас
|
const HEADER_OFFSET = 120; // Высота хедера + запас
|
||||||
|
|
|
||||||
|
|
@ -98,10 +98,6 @@ const filteredPosts = currentSlug
|
||||||
margin: 0 0 2rem;
|
margin: 0 0 2rem;
|
||||||
letter-spacing: -0.02em;
|
letter-spacing: -0.02em;
|
||||||
font-family: 'Merriweather', Georgia, serif;
|
font-family: 'Merriweather', Georgia, serif;
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.related-grid {
|
.related-grid {
|
||||||
|
|
@ -223,6 +219,9 @@ const filteredPosts = currentSlug
|
||||||
.section-title {
|
.section-title {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.related-posts {
|
.related-posts {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue