Как исправить Div до верхней части страницы только с помощью CSS

Я пишу глоссарий. У меня есть алфавитные ссылки в верхней части страницы. Я хочу сохранить верхнюю часть страницы (включая ссылки алфавита) исправленной, в то время как раздел страницы с определениями прокручивается вверх/вниз по мере нажатия на алфавит.

Мой HTML выглядит примерно так:

<html>
<head><title>My Glossary</title></head>
<body>
        <div id="top">
            <a href="#A">A</a> |
             <a href="#B">B</a> |
            <a href="#Z">Z</a>
        </div>

        <div id="term-defs">
           <dl>
               <span id="A"></span>
               <dt>foo</dt>
               <dd>This is the sound made by a fool</dd>
               <!-- and so on ... -->
           </dl>
        </div>
</body>
</html>

[изменить]

Вид эффекта, который я пытаюсь создать, похож на тот здесь. Разница заключается в том, что в примере в ссылке прокрутка страницы выполняется, когда пользователь нажимает на категорию. В моем случае я хочу прокрутить страницу, когда щелкнут индекс (например, алфавит) в верхней части страницы.

Ответ 1

Да, есть несколько способов, которыми вы можете это сделать. "Самый быстрый" способ - добавить CSS в div, подобный следующему

#term-defs {
height: 300px;
overflow: scroll; }

Это заставит div прокручиваться, но это может не получить наилучшего эффекта. Другим маршрутом было бы абсолютное исправление положения предметов в верхней части, вы можете играть с этим, выполняя что-то вроде этого.

#top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 23px;
}

Это закрепит его сверху, поверх другого содержимого с высотой 23px.

Окончательная реализация будет зависеть от того, какой эффект вы действительно хотите.

Ответ 2

Вы можете сделать что-то вроде этого:

<html>
<head><title>My Glossary</title></head>
<body style="margin:0px;">
        <div id="top" style="position:fixed;background:white;width:100%;">
            <a href="#A">A</a> |
             <a href="#B">B</a> |
            <a href="#Z">Z</a>
        </div>

        <div id="term-defs" style="padding-top:1em;">
           <dl>
               <span id="A"></span>
               <dt>foo</dt>
               <dd>This is the sound made by a fool</dd>
               <!-- and so on ... ->
           </dl>
        </div>
</body>
</html>

Это position: fixed, что наиболее важно, потому что он занимает верхний div от обычного потока страниц и фиксирует его в заданной позиции. Также важно использовать padding-top: 1em, потому что иначе term-defs div начнется прямо под верхним div. фон и ширина предназначены для покрытия содержимого div-раздела term-defs, когда они прокручиваются под верхним div.

Надеюсь, что это поможет.

Ответ 3

Вы можете просто сделать верхний div исправленным:

#top { position: fixed; top: 20px; left: 20px; }

Ответ 4

Вы также можете использовать flexbox, но вам нужно будет добавить родительский div, который охватывает div#top и div#term-defs. Итак, HTML выглядит так:

    #content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    #term-defs {
        flex-grow: 1;
        overflow: auto;
    }

    <body>
        <div id="content">
            <div id="top">
                <a href="#A">A</a> |
                <a href="#B">B</a> |
                <a href="#Z">Z</a>
            </div>
    
            <div id="term-defs">
                <dl>
                    <span id="A"></span>
                    <dt>foo</dt>
                    <dd>This is the sound made by a fool</dd>
                    <!-- and so on ... -->
                </dl>
            </div>
        </div>
    </body>