Skip to content

Instantly share code, notes, and snippets.

@hoosin

hoosin/gist:11832155244b71752e42

Created September 10, 2014 09:50
Show Gist options
  • Save hoosin/11832155244b71752e42 to your computer and use it in GitHub Desktop.
Save hoosin/11832155244b71752e42 to your computer and use it in GitHub Desktop.
Download ZIP
index.html
Raw
gistfile1.txt
<!DOCTYPE html>
<head>
<style type="text/css">
*{ padding:0px; margin:0px;}
.box{ width:1000px; background:#ccc; margin:0 auto; overflow:hidden; margin-bottom:20px;}
.main{ width:770px; height:2000px; background:#000; float:left;}
.sub{ width:220px; background:#FC6; float:right;}
.sub01{ width:220px; height:100px; background:#0CC; margin-bottom:10px;}
.fixed{ width:220px; background:#F66; font:normal 13px/30px \5FAE\8F6F\96C5\9ED1; text-align:center;}
.fixed .boxs{background:red; height: 198px; color:#fff; line-height: 200px;border:1px solid #fff;}
.fix {
position: fixed;
bottom: 0;
_position: absolute;
_top: documentElement.scrollTop - this.parentNode.clientHeight+documentElement.clientHeight;
}
.fix-btm {
position: relative;
zoom: 1;
}
.clearfix{*zoom:1} .clearfix:after{content:"\20";clear:both;height:0;display:block;overflow:hidden}
.footer,.header{background:#000; height:200px; color:#fff; text-align:center; line-height: 200px;}
.header{margin-bottom:5px;}
</style>
</head>
<body>
<div class="header">头部</div>
<div class="box clearfix">
<div id="Jmain" class="main"></div>
<div class="sub" id="Jsub">
<div class="sub01"></div>
<div class="sub01"></div>
<div id="JfixBox" class="fixed">
<div class="boxs">1</div>
<div class="boxs">2</div>
<div class="boxs">3</div>
<div class="boxs">4</div>
<div class="boxs">5</div>
</div>
</div>
</div>
<div class="footer">尾部</div>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function(){
var $main = $('#Jmain'),
mainHeight = $main.height(),
$fixBox = $('#JfixBox'),
subHeight = $('#Jsub').height(),
winHeight = $(window).height(), //窗口大小
mainBottomPos = $main.offset().top + mainHeight,
maxTop = mainHeight - $fixBox.height() - (subHeight-$fixBox.height()),
threshold = maxTop;
$(window).scroll(function(){
var scrollTop = $(document.body).scrollTop(),
delta = mainBottomPos - winHeight - scrollTop;
if(delta <= 0){
$fixBox.addClass('fix-btm');
$fixBox.css('top',maxTop);
}else if(delta <= threshold){
$fixBox.removeClass('fix-btm');
$fixBox.css('top','auto');
if(!$fixBox.hasClass('fix')){
$fixBox.addClass('fix');
}
}else{
$fixBox.removeClass('fix-btm');
$fixBox.removeClass('fix');
}
});
});
</script></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment