Как исправить наезжающий на футер сайдбар во время скроллинга?
Всем привет! Делаю сайдбар с якорями указывающими на сектора в основном контенте во время скроллинга.
Две проблемы с которыми столкнулся:
1) хочу, чтобы сайдбар в концовке приклеился к футеру и не выходил за его пределы
2) В песочнице мне не удалось воспроизвести, но в проекте у меня по какой-то причине, если сам прокликиваю якоря в сайдбаре для перехода в нужный сектор контента, то, к примеру, по клику на 3ей ссылке активируется 4ая, по пятой 6ая, по 6ой 7ая.. В чём может быть причина?
3) Список с якорями не доезжает до конечного якоря
snippet
Дополнительно:
с помощью position: sticky:
snippet
некоторый код закомментил - переделаете как вам надо
- modelair спасибо, отметил решением. Хотя мне position: sticky не особо подходит в силу кроссбраузерности. Плюс не указал это в исходном коде, что sidebar у меня лежит внутри структуры wrappera имеющего заданные размеры и при такой ситуации sticky не помогает
- ligisayan, но ваш способ точно оставляет желать лучшего. стоило, конечно, разместить максимально похоже к оригиналу, - 100 процентов есть решение. да и кроссбраузерность давно на высоте, если только вы чем-то 3-5 летней давности не пользуетесь.
- modelair, согласен с вами. Не сразу увидел, что это может повлиять на решение.
Ещё как клиенты пользуются 3летней давности браузерами и древнее, а когда у вас каждый лид на вес золота, то и сражаться будете за каждого.
Вот, к примеру, из такого положения, как решить задачу, когда есть обёртка над сайдбаром, которая имеет определенную ширину внутри сетки? Здесь position:sticky left:130% назначить не выйдет
snippet
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для исправления проблемы с наезжающим на футер сайдбаром во время скроллинга, можно воспользоваться следующими методами:
1. Фиксированное позиционирование: можно применить CSS-свойство `position: fixed` к сайдбару. Таким образом, сайдбар будет оставаться на месте при прокрутке страницы. Однако, это может привести к тому, что сайдбар будет перекрывать другой контент на странице.
```html
.sidebar { position: fixed; top: 0; width: 200px; }
```
2. Задание отступа: можно добавить отступ внизу основного контента страницы, равный высоте сайдбара. Таким образом, при прокрутке страницы сайдбар не будет наезжать на футер.
```html
.content { margin-right: 220px; /* ширина сайдбара + отступ */ } .sidebar { position: fixed; top: 0; width: 200px; } .footer { margin-top: 220px; /* высота сайдбара + отступ */ }
```
3. Использование JavaScript: при прокрутке страницы можно проверять положение сайдбара относительно футера и менять его позиционирование или отступы динамически.
```html
window.addEventListener('scroll', function() { const sidebar = document.querySelector('.sidebar'); const footer = document.querySelector('.footer'); if (sidebar.getBoundingClientRect().bottom > footer.getBoundingClientRect().top) { sidebar.style.position = 'absolute'; sidebar.style.top = footer.getBoundingClientRect().top - sidebar.offsetHeight + 'px'; } else { sidebar.style.position = 'fixed'; sidebar.style.top = '0'; } });
```
Выбор метода зависит от конкретных требований и дизайна вашего сайта. Попробуйте различные варианты и выберите наиболее подходящий для вашего случая.