<!DOCTYPE html>
<meta charset="utf-8">
<title>tab选项卡学习</title>
<style>
html,body,ul,li{padding:0;margin:0}
ul{list-style-type:none}
clear{ clear:both;}
.header{ 960px; margin:0 auto;}
.small_header{ 958px; height:60px; margin:0 auto; border:1px solid #999; background:#f4f4f4;}
.bodyer{ 960px; margin:10px auto 0; border:1px solid #333;}
.body_left{ 650px; height:2000px; float:left; border:1px solid #999;}
.body_right{ 300px; float:right; border:1px solid #999;}
.right_1{ 280px; height:800px; margin:10px auto 0; background:#f4f4f4;}
.right_2{ 280px; margin:0 auto;}
.small_img{ 280px; margin:10px auto 0; text-align:center; background:#666;}
.fixt{ position:fixed; top:0;_position:absolute;}
</style>
<div class="header">
<div class="small_header"></div>
</div>
<div class="bodyer clear">
<div class="body_left">1212</div>
<div class="body_right">
<div class="right_1"></div>
<div class="right_2">
<div class="small_img">
<img src="http://www.nt52.com/wp-content/uploads/2014/02/20140221153593349334-248x300.jpg" alt="女郎" title="女郎">
</div>
</div>
</div>
</div>
<script src="jquery-1.8.3.min.js"></script>
<script>
$(window).scroll(function(){
var ws=$(window).scrollTop(),
bh=$('.small_header').height(),
rbh=$('.right_2').offset().top;
if(ws>bh){
$('.small_header').addClass('fixt');
if($.browser.msie&&($.browser.version === "6.0")){
$('.small_header').css("top",ws);
}
//console.log("超过了");
}else{
$('.small_header').removeClass('fixt');
}
if(ws>rbh){
$('.small_img').addClass('fixt');
if($.browser.msie&&($.browser.version === "6.0")){
$('.small_img').css("top",ws);
}
}else{
$('.small_img').removeClass('fixt');
}
});
</script>