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

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

8 голосов
/ 12 мая 2010

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

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

Ответы [ 3 ]

17 голосов
/ 12 мая 2010

1001 * CSS * 

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

HTML 

<div class="selector">
  ... content for bar here ...
</div>
10 голосов
/ 12 мая 2010

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

EDIT:

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

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;
}
0 голосов
/ 15 февраля 2016

вот идея. но эта панель задач находится внизу, поэтому убедитесь, что вы заменили bottom: 100%; на position: fixed;

<html>
<head>
<title>
home - windows vista v 1.0
</title>
<style>
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
}

.dropdown:hover .dropdown-content {
    display: block;
    bottom:100%;
}
</style>
<style>
#toolbar {
    bottom: 100%;
    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 */
}
</style>
</head>
<body bgcolor="lime">
<a href="vista bogroom.html"><img src="bogroom logo.jpg" alt="" height="50" width="60"></a><br>
<a href="vista mac welcome.html"><img src="mac welcome img.jpg" alt="" height="50" width="60"></a><br>
<a href="vista mac search load.html"><img src="search button.jpg" alt="" height="50" width="60"></a><br>
<a href="vista command prompt.html"><img src="CMD img.jpg" alt="" height="50" width="60"></a><br>
<a href="vista itunes.html"><img src="itunes.jpg" width="60" height="50"></a><br>
<a href="vista ie.html"><img src="ie logo.jpg" width="60" height="50"></a>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="selector">
<div class="dropdown">
<span><img src="start button vista.png" width="50" height="50"></span>
<div class="dropdown-content">
<h1>Liam</h1>
<p>
<a href="vista bogroom.html"><img src="bogroom logo.jpg" alt="" height="50" width="60"></a><br>
<a href="vista mac welcome.html"><img src="mac welcome img.jpg" alt="" height="50" width="60"></a><br>
<a href="vista mac search load.html"><img src="search button.jpg" alt="" height="50" width="60"></a><br>
<a href="vista command prompt.html"><img src="CMD img.jpg" alt="" height="50" width="60"></a><br>
<a href="vista itunes.html"><img src="itunes.jpg" width="60" height="50"></a><br>
<a href="vista ie.html"><img src="ie logo.jpg" width="60" height="50"></a>
</p>
</div>
</div>
</div>
</html>
</body>
</html>

есть пара отсутствующих изображений, поэтому замените их на то, что вы хотите.

надеюсь, вам понравится код! (код для домашней страницы в моей программе Windows Vista в HTML, я работаю над.)

...