|
Сообщение от ozoro
|
|
Если находимся по контенту выше "Места плавающего блока", то при перезагрузке страницы все верно работает, но когда находимся ниже, то при перезагрузке страницы блок сразу прижимается к низу окна браузера и возвращается на "Место плавающего блока" только если начать скролить. Напимер, в Firefox это происходит не всегда, примерно каждую пятую перезагрузку, в других браузерах как придется, в IE появляется на секунду внизу и возвращается на свое место. В общем как-то все это не то...
|
Для этого есть
position: sticky; Вам даже не нужен дополнительный элемент, чтобы указать, где должен останавливаться сам плавающий элемент, поскольку он так и так находится там, где он должен останавливаться.
Вот, идеальное позиционирование...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Плавающий блок, замирающий над определенным элементом</title>
<style>
html, body {
margin: 0;
}
.sidebar {
position: -webkit-sticky;
position: sticky;
bottom: 10px;
height: 50px;
padding: 1em;
font-family: Arial, Helvetica, sans-serif;
border: 2px solid #bab89a;
background: #cfc;
text-align: center;
}
.footer {
background: #fcc;
text-align: center;
height: 270px;
}
</style>
</head>
<body>
<script>
for (let index = 1; index <= 100; index++) {
document.write("<p>Строка " + index + "</p>");
}
</script>
<div class="sidebar">Контент плавающего блока</div>
<script>
for (let index = 1; index <= 100; index++) {
document.write("<p>Строка " + index + "</p>");
}
</script>
<div class="footer">
<p>Copyright © 2020</p>
</div>
</body>
</html>
Да,
position: sticky; не работает в IE9, но что вам мешает обновить браузер до последней версии (Edge 79). Или если вам так нужна поддержка IE9, то вы можете проверить, что
position: sticky; не работает и использовать в старом браузере свой дёргающийся скрипт.