CSS only scrollspy

Scrollspy is originally a Bootstrap feature which automatically highlights the current scroll position in the navigation list.

Since I don't mind avoiding Javascript for resource reasons, I was really happy to encounter this CSS only trick to imitate the scrollspying.

Pros CSS only scrollspy:

• works pretty well on desktops
• very little code
• no javascript

Cons CSS only scrollspy:

• doesn't work as well on mobile (only highlights the nav link when actually tapping on the current section)
• implementing requires a certain structure of your HTML code:

index.html

    <section id="a">A</section>
    <section id="b">B</section>
    <section id="c">C</section>
    <section id="d">D</section>
    <section id="e">E</section>
    <nav>
        <a href="#a">A</a>
        <a href="#b">B</a>
        <a href="#c">C</a>
        <a href="#d">D</a>
        <a href="#e">E</a>
    </nav>
</body>

As you can see, the navigation is placed after the content. Which may be counterintuitive but necessary, because the CSS only scrollspy makes use of the "tilde".

The tilde is a sibling combinator. The navigation has to be a succeeding sibling of the content.

style.css

section {
    height: 100vh;
}

nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1;
}

nav a:hover, 
section#a:hover ~ nav a[href='#a'],
section#b:hover ~ nav a[href='#b'],
section#c:hover ~ nav a[href='#c'],
section#d:hover ~ nav a[href='#d'],
section#e:hover ~ nav a[href='#e'] {
    background-color: #fff;
    color: #000;
}

::-webkit-scrollbar {
    width: 0;
} 

Find a working example on my page. And the according code on github.