Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
スクロールしてもついてくるメニュー
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
floatBox("#fixedArea", 1);
function floatBox(ele, flag) {
var box = $(ele);
var fixed_box_offset = box.offset();
var box_size = {"width": box.width(), "height": box.height()};
var footer_box_offset = $("#footer").offset();
$(window).scroll(function() {
var scroll_val = $(this).scrollTop();
if(scroll_val > fixed_box_offset.top) {
if(box.css("top") != 0) {
box.css({
"position": "fixed",
"z-index": 999,
"width": box_size.width,
"height": box_size.height,
"top": 0,
"bottom": "auto"
});
}
if(flag == 1) {
if(scroll_val > (footer_box_offset.top - box_size.height)) {
if(box.css("bottom") != 0) {
box.css({
"position": "absolute",
"z-index": 999,
"width": box_size.width,
"height": box_size.height,
"top": "auto",
"bottom": 0
});
}
}
}
} else {
box.removeAttr("style");
}
});
}
});
</script>
<style type="text/css">
#wrap{
position: relative;
width:900px;
margin:0 auto;
}
#header{
height:200px;
margin-bottom:10px;
padding:20px;
background:#eee;
}
#container{
margin-bottom:0px;
}
#main{
float:left;
width:660px;
min-height:400px;
padding:20px;
background:#eee;
}
#side{
position: relative;
float:right;
width:180px;
min-height:440px;
background:#eee;
}
#fixedArea{
height:100px;
background:#00bfff;
}
#fixedArea div{
padding:20px;
color:#fff;
}
#footer{
padding-top:10px;
}
#footer div{
height:600px;
padding:20px;
background:#eee;
}
.clearfix{
overflow: hidden;
*zoom: 1;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">header</div>
<div id="container" class="clearfix">
<div id="main">main</div>
<div id="side">
<div id="fixedArea">
<div>side</div>
</div>
</div>
</div>
<div id="footer">
<div>footer</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment