标题fixed 定位

标签：io   ar   os   sp   for   on   div   art   bs   

最近在做一个标题定位的效果，开始想找个插件得了，找了半天结果没啥成果，结果放弃了，还是偷懒不得，自己写一个吧！

需求是这样的：滚动到一定位置的后显示模块的标题 定置，滚动到相应的模块，替换该模块的的内容。

html 代码：

<article id="box-wrap">
<section class="list">
<h3>标题0</h3>
<ul class="gallery" >

<li><a href="#" data-size="1024x1024">内容内容内容内容内容内容
<figure>This is dummy caption 6.</figure></a></li>

<li><a href="#" data-size="1024x1024">内容内容内容内容内容内容
<figure>This is dummy caption 6.</figure></a></li>

<li><a href="#" data-size="1024x1024">内容内容内容内容内容内容
<figure>This is dummy caption 6.</figure></a></li>

</ul>
</section>
<section class="list">
<h3>标题1</h3>
<ul class="gallery">

<li><a href="#" data-size="1024x1024">内容内容内容内容内容内容
<figure>This is dummy caption 6.</figure></a></li>

<li><a href="#" data-size="1024x1024">内容内容内容内容内容内容
<figure>This is dummy caption 6.</figure></a></li>

<li><a href="#" data-size="1024x1024">内容内容内容内容内容内容
<figure>This is dummy caption 6.</figure></a></li>

</ul>
</section>
<section class="list">
<h3>标题2</h3>
<ul class="gallery">
<li><a href="#" data-size="1024x1024">内容内容内容内容内容内容
<figure>This is dummy caption 6.</figure></a></li>

<li><a href="#" data-size="1024x1024">内容内容内容内容内容内容
<figure>This is dummy caption 6.</figure></a></li>

</ul>
<div class="product-info">
</div>
</section>
<section class="list">
<h3>标题3</h3>
<ul class="gallery">
<li><a href="#" data-size="1024x1024">内容内容内容内容内容内容
<figure>This is dummy caption 6.</figure></a></li>
<li><a href="#" data-size="1024x1024">内容内容内容内容内容内容
<figure>This is dummy caption 6.</figure></a></li>
</ul>
</section>

jquery 代码：

var container = $("#box-wrap");
var headers=container.find("h3");
var zIndex = 2;
var containerTop = container.offset().top + parseInt(container.css(‘marginTop‘)) + parseInt(container.css(‘borderTopWidth‘));
var fakeHeader = headers.filter(‘:first‘).clone();
headers.each(function () {
var header = $(this), height = header.outerHeight(), width = header.outerWidth();
zIndex += 2;
});
container.wrap(‘<div class="wrap" />‘);
fakeHeader.css({
zIndex: 1,
position: ‘fixed‘,
top:"0",
marginTop:"0",
width: headers.filter(‘:first‘).width()
});
$(window).scroll(function () {
if($(window).scrollTop() > container.offset().top){
container.before(fakeHeader.text(headers.filter(‘:first‘).text()));
}else{
fakeHeader.remove();
}
headers.each(function () {
var header = $(this);
var top = header.offset().top;
if($(window).scrollTop() > top){
fakeHeader.text(header.text());
fakeHeader.css(‘zIndex‘, parseInt(header.css(‘zIndex‘))+1);
}

});
});

标题fixed 定位

标签：io   ar   os   sp   for   on   div   art   bs   

原文地址：http://www.cnblogs.com/nimoer/p/4158774.html