Ну коли опу уже не нужно, выложу то что тогда прикинул:
<!DOCTYPE HTML>
<html>
<body>
<style>
.main * {margin:0;padding:0}
.main h1 {
background: #e8e8e8; /* Old browsers */
background: -moz-linear-gradient(top, #e8e8e8 0%, #cccccc 92%, #878787 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e8e8e8), color-stop(92%,#cccccc), color-stop(100%,#878787)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e8e8e8 0%,#cccccc 92%,#878787 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e8e8e8 0%,#cccccc 92%,#878787 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e8e8e8 0%,#cccccc 92%,#878787 100%); /* IE10+ */
background: linear-gradient(top, #e8e8e8 0%,#cccccc 92%,#878787 100%); /* W3C */
font-size:20px;
top:0;
left:0;
position:relative;
height:30px;
line-height:30px;
margin-bottom:-30px;
z-index:1;
}
.main p {margin-top:30px;}
#scroll {height:200px;width:300px;overflow:auto;}
.main {width:300px;position:relative;border:1px solid #999;}
</style>
<div class="main">
<div id="scroll">
<h1>Заглавие 1</h1>
<p>Текст 1<br>Текст 2<br>Текст 3<br>Текст 4</p>
<h1>Заглавие 2</h1>
<p>Текст 1<br>Текст 2<br>Текст 3<br>Текст 4</p>
<h1>Заглавие 3</h1>
<p>Текст 1<br>Текст 2<br>Текст 3<br>Текст 4</p>
<h1>Заглавие 4</h1>
<p>Текст 1<br>Текст 2<br>Текст 3<br>Текст 4<br>Текст 2<br>Текст 3<br>Текст 4</p>
<h1>Заглавие 5</h1>
<p>Текст 1<br>Текст 2<br>Текст 3<br>Текст 4<br>Текст 2<br>Текст 3<br>Текст 4</p>
</div>
</div>
<script>
(function(){
function addCss(css) {
var style = document.createElement("style");
style.type = "text/css";
style.styleSheet?style.styleSheet.cssText=css:style.appendChild(document.createTextNode(css));
document.getElementsByTagName("head")[0].appendChild(style);
}
var scr = document.getElementById('scroll'),
head = scr.getElementsByTagName("h1"),
len = i = head.length,
pos = [Infinity],
last = head[0],
headerHeight = last.offsetHeight,
headerWidth = scr.clientWidth;
addCss('.main h1{width:'+headerWidth+'px}');
while(i--){pos.unshift(head[i].offsetTop)}
scr.onscroll=function(){
var top = scr.scrollTop;
var i=len;
while(i--&&top<pos[i]);
last.removeAttribute('style');
last=head[i];
if(top<=pos[i+1]-headerHeight) last.style.position='absolute';
else last.style.top=pos[i+1]-pos[i]-headerHeight+'px';
}
})()
</script>
</body>
</html>
В ие не работает, но подгонять лень, кому надо пусть тот и мучается) |