Как исправить наезжающий на футер сайдбар во время скроллинга?

Question

[ligisayan]

Всем привет! Делаю сайдбар с якорями указывающими на сектора в основном контенте во время скроллинга.
Две проблемы с которыми столкнулся:
1) хочу, чтобы сайдбар в концовке приклеился к футеру и не выходил за его пределы

2) В песочнице мне не удалось воспроизвести, но в проекте у меня по какой-то причине, если сам прокликиваю якоря в сайдбаре для перехода в нужный сектор контента, то, к примеру, по клику на 3ей ссылке активируется 4ая, по пятой 6ая, по 6ой 7ая.. В чём может быть причина?
3) Список с якорями не доезжает до конечного якоря

Answer 1

[modelair]

с помощью position: sticky:

некоторый код закомментил - переделаете как вам надо

Comments

[ligisayan]

modelair спасибо, отметил решением. Хотя мне position: sticky не особо подходит в силу кроссбраузерности. Плюс не указал это в исходном коде, что sidebar у меня лежит внутри структуры wrappera имеющего заданные размеры и при такой ситуации sticky не помогает

[modelair]

ligisayan, но ваш способ точно оставляет желать лучшего. стоило, конечно, разместить максимально похоже к оригиналу, - 100 процентов есть решение. да и кроссбраузерность давно на высоте, если только вы чем-то 3-5 летней давности не пользуетесь.

[ligisayan]

modelair, согласен с вами. Не сразу увидел, что это может повлиять на решение.
Ещё как клиенты пользуются 3летней давности браузерами и древнее, а когда у вас каждый лид на вес золота, то и сражаться будете за каждого.
Вот, к примеру, из такого положения, как решить задачу, когда есть обёртка над сайдбаром, которая имеет определенную ширину внутри сетки? Здесь position:sticky left:130% назначить не выйдет