如何在粘性菜单栏固定至顶部时缩小圆形Div？

页面横幅下方设置了水平菜单栏，菜单栏上有一个圆形div。滚动页面时菜单栏会固定在顶部，希望实现菜单栏固定到顶部时缩小该圆形div的效果，不确定仅用CSS能否实现，还是需要借助JS。

CSS代码 #

.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;
}

HTML代码 #

<div style="height:200px;background: green"></div>

<div class="sticky">
  <div class="divbox2"></div>
  <div class="type1"></div>
</div>

<img src="https://i.sstatic.net/8FkV2fTK.jpg">
<img src="https://i.sstatic.net/8FkV2fTK.jpg">

仅用CSS无法实现这个效果——position: sticky元素没有内置的CSS选择器可以检测它是否已经固定到顶部，必须借助JavaScript监听滚动状态来触发样式变化。

具体实现步骤： #

1. 给圆形div新增一个用于缩小的CSS类，定义缩小后的尺寸和位置：

.type1.shrink {
  width: 80px;
  height: 80px;
  left: 335px; /* 调整位置，保持相对菜单栏的视觉对齐 */
  top: 10px;
  transition: all 0.3s ease; /* 添加上过渡动画，让缩小更平滑 */
}

2. 添加JavaScript监听滚动事件，判断菜单栏是否固定到顶部，动态切换缩小类：

const stickyNav = document.querySelector('.sticky');
const circle = document.querySelector('.type1');

window.addEventListener('scroll', () => {
  const navRect = stickyNav.getBoundingClientRect();
  // 当菜单栏顶部距离视口顶部<=0时，说明已固定
  if (navRect.top <= 0) {
    circle.classList.add('shrink');
  } else {
    circle.classList.remove('shrink');
  }
});

这样滚动页面时，菜单栏固定到顶部的瞬间，圆形div会平滑缩小；滚动回顶部区域时，圆形div会恢复原尺寸。

内容的提问来源于stack exchange，提问作者AL W