Создайте статическую панель инструментов на веб-странице, которая следует за прокруткой в HTML

Как Вы делаете панель инструментов как объект в HTML, который следует за прокруткой пользователя так, чтобы это всегда было наверху видимой страницы?

Заранее спасибо!

8
задан Mark Szymanski 12 May 2010 в 01:55
поделиться

2 ответа

css

.selector
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

html

<div class="selector">
  ... content for bar here ...
</div>
17
ответ дан 5 December 2019 в 06:09
поделиться

Вам это нужно специально для прокрутки (анимации) или просто статического (например, панели инструментов) объекта?

РЕДАКТИРОВАТЬ:

Хорошо, чтобы добавить статический (например, панель инструментов) ), ширина которого составляет 100% страницы, а высота, скажем, 25 пикселей, вы бы сделали это.

HTML

<div id="toolbar">
    <p>Some content...</p>
</div>

CSS

#toolbar {
    position: fixed;
    width: 100%;
    height: 25px;
    top: 0;
    left: 0;
    padding: 5px 10px; /* some styling, please note overall height of the object will be 35px due to 5px padding on top/bottom. */
    background: #ccc; /* some styling */
    border-bottom: 1px solid #333; /* some styling */
}

Обратите внимание, что это может перекрывать любое содержимое, которое у вас есть в верхней части страницы, поэтому используйте верхнее поле, чтобы сдвинуть его под панель инструментов, или просто установите:

body {
    margin-top: 35px;
}
10
ответ дан 5 December 2019 в 06:09
поделиться
Другие вопросы по тегам:

Похожие вопросы: