J'ai un menu de barre latérale défilante. Ainsi, lorsque je sélectionne un élément de menu, il doit appara?tre en haut de la barre latérale. Il n'y a aucun problème pour configurer le menu actif. J'ai compris. Mais je ne parviens pas à définir la position supérieure de la barre latérale. Veuillez ne pas recommander jQuery. Au lieu de cela, on m'a conseillé d'utiliser du JavaScript simple Voici une référence de code
.sidebar{ height:100px overflow-y:scroll; } .sidebar ul li{ padding:30px; }
<!-- CSS --> <!-- html --> <div class="sidebar"> <ul> <li>item1</li> <li>item2</li> <li>item3</li> <li>item4</li> <li>item5</li> <li>item7</li> <li>item8</li> <li>item9</li>........ <li>item100</li> </ul> </div>
Solution CSS pure utilisant les propriétés :target
偽類、flexbox
布局以及 order
.
.sidebar { background-color: #ddd; height: 200px; overflow-y: scroll; } .sidebar ul { display: flex; flex-direction: column; margin: 0; } .sidebar li { padding: 1em; order: 1; } .sidebar :target { background-color: #aaa; order: 0; }