Изменение размера липкого элемента в конечном положении ⇐ CSS

[Anonymous]

У меня есть горизонтальная строка меню под баннером страницы. На панели находится круглый элемент div. Когда пользователь прокручивает вниз, меню остается в верхней части страницы. Я пытаюсь понять, как сжать круглый элемент div, когда строка меню достигает верха. Я не уверен, можно ли это сделать с помощью чистого CSS или нужен JS.

Код: Выделить всё

.type1 {
border-radius: 50%;
width: 150px;
height: 150px;
background: yellow;
border: 3px solid red;
overflow: hidden;
position: absolute;
left: 300px;
z-index: 1;
}

.sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 2;
}

.divbox2 {
text-align: left;
width: 1000px;
height: 100px;
background-color: red;
position: absolute;
left: 0px;
}

Код: Выделить всё

[img]https://i.sstatic.net/8FkV2fTK.jpg[/img]
[img]https://i.sstatic.net/8FkV2fTK.jpg[/img]

прикрепленная панель навигации с кругом

Подробнее здесь: https://stackoverflow.com/questions/784 ... l-position