Position: fixed
349 сообщений
#13 лет назад
Здравствуйте, уважаемые гуру.
Пишу Вам в надежде на решение сложившейся проблемы.
Допустим, у нас есть html страничка с таблицой.
Необходимо, чтобы при прокрутке вниз, шапка таблицы тоже двигалось вниз вверху экрана.
Но проблема в том, что элемент с свойством position:fixed двигается только в первоначальном положении относительно экрана.
Т.е. сначала шапка таблицы находится в 250px от верхней границы монитора. Скроллим вниз, шапка таблицы и верхняя граница экрана соприкасаются и при дальнейшем скроллинге шапка таблицы будет двигаться вниз на самом верху экрана.
Без JS не обойтись?
935 сообщений
11416 сообщений
#13 лет назад
Не обойтись
349 сообщений
#13 лет назад
А как именно это делается?Я в JS не сильна. Знаю хорошо только HTML и CSS
1 сообщение
#13 лет назад
WebAir, буду премного вам благодарен если опишите способ решения данной задачи, или ссылку скиньте.Заранее спасибо.
349 сообщений
#13 лет назад
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Swim container</title>
<style type="text/css">
* { margin: 0; padding: 0;}
body {}
.header { height: 250px; background: green;}
#swim {
width: 200px;
height: 200px;
background: blue;
position: absolute;
top: 250px;
}
</style>
</head>
<body>
<div class="header"></div>
<div id="swim">
</div>
<div class="content">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br /><br /><br /><br />
</div>
<script type="text/javascript">
var swim = document.getElementById('swim');
window.onscroll = function(){
var scroll = document.documentElement.scrollTop || document.body.scrollTop;
if(scroll >= 250){
swim.style.position = 'fixed';
swim.style.top = 0 + 'px';
}else {
if(scroll < 250){
swim.style.position = 'absolute';
swim.style.top = 250 + 'px';
}
}
}
</script>
</body>
</html>
swim - плавающий контейнер
250 - высота headera (расстояние от верхней границы до плавающего контейнера)
935 сообщений