HTML：

<div class="circle-container">
<div class="circle">
<div class="heading active">Heading 1</div>
<div class="heading">Heading 2</div>
<div class="heading">Heading 3</div>
<div class="heading">Heading 4</div>
<div class="heading">Heading 5</div>
<div class="heading">Heading 6</div>
<div class="heading">Heading 7</div>
<div class="heading">Heading 8</div>
<div class="heading">Heading 9</div>
<div class="heading">Heading 10</div>
</div>
</div>

CSS：

.circle-container {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.circle {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #fff;
}

.heading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
width: auto;
height: auto;
padding: 10px;
font-size: 14px;
color: #000;
background-color: #fff;
border-radius: 5px;
}

.heading.active {
background-color: #000;
color: #fff;
}

JavaScript：

const headings = document.querySelectorAll('.heading');
const circle = document.querySelector('.circle');
const circleRect = circle.getBoundingClientRect();
const circleRadius = circleRect.width / 2;
const scrollThreshold = window.innerHeight / 2;

window.addEventListener('scroll', () => {
const scrollY = window.scrollY;

headings.forEach((heading, index) => {
const angle = (index / headings.length) * Math.PI * 2;
const x = circleRadius * Math.cos(angle);
const y = circleRadius * Math.sin(angle);
const translateY = y + scrollY - circleRect.top - scrollThreshold;

heading.style.transform = `translate(${x}px, ${translateY}px) rotate(${- 
angle}rad)`;

if (translateY > -scrollThreshold && translateY < scrollThreshold) {
  heading.classList.add('active');
} else {
  heading.classList.remove('active');
}
});
});

我不确定是否可以在Webflow中不使用自定义代码来实现这一点，但是如果您可以访问HTML和CSS，那么您可以将此代码添加到Webflow项目中。