Дружим 'липкое' меню и якорные ссылки

preview_player
Показать описание
Одно CSS-свойство scroll-margin-top решает проблему перекрытия областей с якорными ссылками. Шапка с меню остается "липкой", но больше не перекрывает якорные области.

Мои курсы по вебу с купонами:

📢 Поддержка канала:
  1. Михаил Непомнящий
  2. css scroll anchoring
  3. css scroll-margin
Рекомендации по теме
Дружим 'липкое' меню 0:00:43

Дружим 'липкое' меню и якорные ссылки

Липкое меню с 0:20:11

Липкое меню с Framer motion

Уроки по Html 0:04:37

Уроки по Html и Css - Добавляем якорные ссылки на навигационное меню...

Простые решения для 0:29:23

Простые решения для сложных задач с Intersection Observer API

Глубокое копирование объекта 0:08:43

Глубокое копирование объекта в JavaScript

NextJS 13. Аутентификация 0:33:59

NextJS 13. Аутентификация и приватные роуты

Как открыть и 0:05:14

Как открыть и закрыть меню свайпом | Custom Swipe Menu

Как сделать плавный 0:05:27

Как сделать плавный скролл до якоря на сайте на CSS

Зачем на самом 0:08:33

Зачем на самом деле нужен хук useCallback

Эффективный TypeScript. Способ 0:07:33

Эффективный TypeScript. Способ №50 по улучшению кода

Как сделать некликабельным 0:01:31

Как сделать некликабельным пункт в меню Проект Ивана Никитина...

NextJS 13. Быстрый 0:40:12

NextJS 13. Быстрый старт

Чем заменить Axios 0:17:12

Чем заменить Axios в 2023-м

Анимация перехода между 0:25:17

Анимация перехода между страницами в React SPA с react-spring

Как сделать плавный 0:00:58

Как сделать плавный скролл по странице в React JS | ScrollTo in React JS #shorts...

Как поделиться локальной 0:02:34

Как поделиться локальной разработкой с 'горячими' обновлениями...

UI/UX дизайн. Разбор 1:23:11

UI/UX дизайн. Разбор 13 работ дизайна подписчиков #69. уроки веб-дизайна в Figma...

Дизайн сайта: нейросеть 0:00:09

Дизайн сайта: нейросеть vs. веб-дизайнер #shorts

Разбор сайтов подписчиков. 1:00:56

Разбор сайтов подписчиков. Ответы на вопросы.

Психотерапевтический рассказ. Радость 0:04:07

Психотерапевтический рассказ. Радость как базовая эмоция....

How to Create 0:06:01

How to Create Mega Menu in WordPress Website with Elementor | Mega Menu Elementor Pro | Mazrify

Комментарии
Автор

Век живи - век учись.
Не знал о таком свойстве.
Спасибо.

ViktorHugo-jerq
Автор

Миша, мало хорошего контента, спасибо что хоть твой есть

xamana
Автор

Вау, спасибо, полезно знать что так можно

voyvb
Автор

Так происходит из-за того что верхнее меню вырвано из контекста, если использовать position sticky, то анкоры будут работать корректно и для поисковика лучше, из контекста меню не вырезаешь.

faxtel
Автор

Можно ли сделать без фреймворка многостраничный сайт с роутером на фронте? Ну например нажимаем на кнопку блог, Открывается страница блоги. Это можно сделать только с тегом а и создавая для каждой страницы отдельную страницу html?

skyTechVektor
Автор

Михайл привет, сейчас очень не хватает курса по mobx, есть ли у вас желание снимать ролики по нему? (платный/бесплатный)

tecitxx