Можно ли отследить положение якорной ссылки через CSS?

Есть банальный сайтбар с якорными ссылками, которые сформированы с привязкой к заголовкам. Есть ли возможность новыми стилями СSS или HTML атрибутами как-то отслеживать область видимости, и перекрашивать данные ссылки ? введите сюда описание изображения

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
}

.block {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
  min-height: 100vh;
}

.main {
  width: 70vw;
}

.aside {
  position: relative;
  width: 20vw;
}

.aside ul {
  position: sticky;
  top: 0;
}
<div class="block">
  <main class="main">
    <h2 id="a1">Test1</h2>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nihil praesentium, deleniti explicabo tempora, voluptatibus, exercitationem illum ipsam nemo sapiente saepe itaque magni vel maxime! Veniam optio at, ut officiis.</div>
    <div>Dicta non culpa optio ut eveniet reprehenderit cumque incidunt excepturi suscipit harum, deserunt maiores dolore est explicabo autem aperiam voluptatibus libero sapiente nihil molestiae voluptatum ipsam ratione cupiditate quo? Nesciunt.</div>
    <div>Debitis, ut. Modi officia maiores ex maxime quam voluptatem possimus deserunt laboriosam distinctio, quasi adipisci amet impedit quaerat incidunt accusantium ipsa deleniti soluta saepe earum, nostrum, nulla dolorem laborum laudantium.</div>
    <div>Non placeat ipsa sapiente quam deserunt earum, perferendis odit totam provident voluptatum repudiandae iste fugit, blanditiis cumque eius molestias pariatur aut incidunt rerum delectus eos sed voluptates inventore explicabo! Omnis?</div>
    <div>Ullam officia sed dolor sapiente eaque enim magni possimus, iure ducimus aliquam perferendis, molestias temporibus omnis rerum assumenda dolore, inventore voluptas quia illo explicabo repellat at excepturi beatae eligendi rem!</div>


    <h2 id="a2">Test2</h2>

    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nihil praesentium, deleniti explicabo tempora, voluptatibus, exercitationem illum ipsam nemo sapiente saepe itaque magni vel maxime! Veniam optio at, ut officiis.</div>
    <div>Dicta non culpa optio ut eveniet reprehenderit cumque incidunt excepturi suscipit harum, deserunt maiores dolore est explicabo autem aperiam voluptatibus libero sapiente nihil molestiae voluptatum ipsam ratione cupiditate quo? Nesciunt.</div>
    <div>Debitis, ut. Modi officia maiores ex maxime quam voluptatem possimus deserunt laboriosam distinctio, quasi adipisci amet impedit quaerat incidunt accusantium ipsa deleniti soluta saepe earum, nostrum, nulla dolorem laborum laudantium.</div>
    <div>Non placeat ipsa sapiente quam deserunt earum, perferendis odit totam provident voluptatum repudiandae iste fugit, blanditiis cumque eius molestias pariatur aut incidunt rerum delectus eos sed voluptates inventore explicabo! Omnis?</div>
    <div>Ullam officia sed dolor sapiente eaque enim magni possimus, iure ducimus aliquam perferendis, molestias temporibus omnis rerum assumenda dolore, inventore voluptas quia illo explicabo repellat at excepturi beatae eligendi rem!</div>

    <h2 id="a3">Test3</h2>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nihil praesentium, deleniti explicabo tempora, voluptatibus, exercitationem illum ipsam nemo sapiente saepe itaque magni vel maxime! Veniam optio at, ut officiis.</div>
    <div>Dicta non culpa optio ut eveniet reprehenderit cumque incidunt excepturi suscipit harum, deserunt maiores dolore est explicabo autem aperiam voluptatibus libero sapiente nihil molestiae voluptatum ipsam ratione cupiditate quo? Nesciunt.</div>
    <div>Debitis, ut. Modi officia maiores ex maxime quam voluptatem possimus deserunt laboriosam distinctio, quasi adipisci amet impedit quaerat incidunt accusantium ipsa deleniti soluta saepe earum, nostrum, nulla dolorem laborum laudantium.</div>
    <div>Non placeat ipsa sapiente quam deserunt earum, perferendis odit totam provident voluptatum repudiandae iste fugit, blanditiis cumque eius molestias pariatur aut incidunt rerum delectus eos sed voluptates inventore explicabo! Omnis?</div>
    <div>Ullam officia sed dolor sapiente eaque enim magni possimus, iure ducimus aliquam perferendis, molestias temporibus omnis rerum assumenda dolore, inventore voluptas quia illo explicabo repellat at excepturi beatae eligendi rem!</div>

    <h2 id="a4">Test4</h2>

    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nihil praesentium, deleniti explicabo tempora, voluptatibus, exercitationem illum ipsam nemo sapiente saepe itaque magni vel maxime! Veniam optio at, ut officiis.</div>
    <div>Dicta non culpa optio ut eveniet reprehenderit cumque incidunt excepturi suscipit harum, deserunt maiores dolore est explicabo autem aperiam voluptatibus libero sapiente nihil molestiae voluptatum ipsam ratione cupiditate quo? Nesciunt.</div>
    <div>Debitis, ut. Modi officia maiores ex maxime quam voluptatem possimus deserunt laboriosam distinctio, quasi adipisci amet impedit quaerat incidunt accusantium ipsa deleniti soluta saepe earum, nostrum, nulla dolorem laborum laudantium.</div>
    <div>Non placeat ipsa sapiente quam deserunt earum, perferendis odit totam provident voluptatum repudiandae iste fugit, blanditiis cumque eius molestias pariatur aut incidunt rerum delectus eos sed voluptates inventore explicabo! Omnis?</div>
    <div>Ullam officia sed dolor sapiente eaque enim magni possimus, iure ducimus aliquam perferendis, molestias temporibus omnis rerum assumenda dolore, inventore voluptas quia illo explicabo repellat at excepturi beatae eligendi rem!</div>


  </main>
  <aside class="aside">
    <ul>
      <li><a href="#a1">Test1</a></li>
      <li><a href="#a2">Test2</a></li>
      <li><a href="#a3">Test3</a></li>
      <li><a href="#a4">Test4</a></li>
    </ul>
  </aside>

</div>

Есть ли возможность в данном примере менять цвет ссылки, если она находиться в областе видимости блока ?


Ответы (0 шт):