Исправляет рассчёт scroll-margin

doka-guide · May 21, 2024 · 5933427 · 5933427
1 parent 4738591
commit 5933427
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 23 deletions.
diff --git a/src/scripts/modules/header.js b/src/scripts/modules/header.js
@@ -107,7 +107,7 @@ class Header extends BaseComponent {
   //   const state = this.state
   //   state.stickyHeaderHeight = header.offsetHeight
 
-  //   document.documentElement.style.setProperty('--sticky-header-height', state.stickyHeaderHeight)
+  //   document.documentElement.style.setProperty('--header-height', state.stickyHeaderHeight)
   // }
 
   calculateScrollThreshold() {

diff --git a/src/styles/blocks/article-heading.css b/src/styles/blocks/article-heading.css
@@ -1,7 +1,13 @@
 .article-heading {
+  scroll-margin-block: calc(var(--header-height) * 1px + 1rem);
   font-size: var(--font-size);
   line-height: var(--line-height);
-  scroll-margin: calc((var(--sticky-header-height, 0) * 1px) + 1rem);
+}
+
+@media (width >= 1024px) {
+  .article-heading {
+    scroll-margin-block: calc(var(--header-height) * 1px + 2rem);
+  }
 }
 
 .article-heading__title {

diff --git a/src/styles/blocks/article-nav.css b/src/styles/blocks/article-nav.css
@@ -56,7 +56,6 @@
   inset: 0;
 }
 
-/* TODO: поколдовать с размерами иконок */
 .toggle-button__icon {
   display: block;
   margin: auto;

diff --git a/src/styles/blocks/article.css b/src/styles/blocks/article.css
@@ -213,7 +213,7 @@
   }
 
   .article__aside {
-    --header-offset: calc(var(--header-height, 0) * 1px);
+    --header-offset: calc(var(--header-height) * 1px);
     position: sticky;
     top: var(--header-offset, 0);
     box-sizing: border-box;

diff --git a/src/styles/blocks/articles-group.css b/src/styles/blocks/articles-group.css
@@ -1,6 +1,6 @@
 .articles-group__title {
   position: sticky;
-  top: calc(var(--offset, 0px) + var(--is-header-sticky, 0) * var(--header-height, 0) * 1px);
+  top: calc(var(--header-height) * 0.2px);
   margin-top: 0;
   margin-bottom: 12px;
   box-sizing: border-box;
@@ -13,6 +13,12 @@
   will-change: top;
 }
 
+@media (width >= 1024px) {
+  .articles-group__title {
+    top: calc(var(--header-height) * 1.5px);
+  }
+}
+
 .articles-group__sub-title {
   margin-top: calc(14 / 15 * 1em);
   margin-bottom: calc(17 / 15 * 1em);

diff --git a/src/styles/blocks/base.css b/src/styles/blocks/base.css
@@ -8,8 +8,6 @@
   font-family: var(--font-family, sans-serif);
   color: var(--color-text);
   background-color: var(--color-background);
-
-  /* Нам точно нужен этот префикс? */
   -webkit-text-size-adjust: 100%;
   scroll-behavior: smooth;
 }
@@ -24,17 +22,5 @@
 }
 
 .base__body:has(.header--open > .header__controls--shrink) {
-  padding-top: var(--sticky-header-height);
-}
-
-/* TODO: разобраться, нужны ли эти стили */
-
-@media not all and (width >= 768px) {
-  .base__body:has(.header--open) {
-    padding-top: 0;
-  }
-
-  .base__body:has(.header--open > .header__controls--shrink) {
-    padding-top: 0;
-  }
+  padding-top: var(--header-height);
 }
diff --git a/src/styles/blocks/index-section.css b/src/styles/blocks/index-section.css
@@ -23,14 +23,20 @@
 }
 
 .index-section__item {
-  scroll-margin-block: calc(var(--header-height, 0) * 1px + 1em);
+  scroll-margin-block: calc(var(--header-height) * 1px + 1rem);
   position: relative;
   padding-bottom: var(--gutter);
   display: flow-root;
   page-break-inside: avoid;
   break-inside: avoid;
 }
 
+@media (width >= 1024px) {
+  .index-section__item {
+    scroll-margin-block: calc(var(--header-height) * 1px + 2rem);
+  }
+}
+
 .index-section__item::before {
   content: "";
   opacity: 0;

diff --git a/src/styles/blocks/people-page.css b/src/styles/blocks/people-page.css
@@ -35,7 +35,7 @@
 
   .people-page__filter {
     position: sticky;
-    top: calc(var(--is-header-sticky) * var(--header-height) * 1px + var(--offset));
+    top: calc(var(--header-height) * 1px);
     flex: 0 0 14em;
     box-sizing: border-box;
     transition: top 0.6s;

diff --git a/src/styles/blocks/person-page.css b/src/styles/blocks/person-page.css
@@ -145,7 +145,7 @@
 
   .person-page__avatar {
     position: sticky;
-    top: calc(var(--is-header-sticky) * var(--header-height) * 1px);
+    top: calc(var(--header-height) * 1px);
     transition: top 0.6s;
   }