哪位高手能帮小弟我写一个跟着浏览器范围而移动效果【100分求js代码】
谁能帮我写一个<div>跟着浏览器范围而移动效果【100分求js代码】
最好用jQuery写
效果如图所示：
1、原始状态
2、浏览器向下滚动
3、继续向下
4、浏览器向上滚动
------解决方案--------------------
调用 document.documentElement.offsetTop 就可以,这个是你浏览器当前内容距离顶部的坐标
onscroll 和 onresize 你自己定义一下就可以
------解决方案--------------------
对了,div 记得 position:absolute
------解决方案--------------------
用position:fixed 试试呢
------解决方案--------------------
抄来的代码，参考下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>固定浮动侧边栏</title>
<style type="text/css">
body {
margin: 10px auto;
font-family: sans-serif;
width: 500px;
}
div {
border-radius: 5px;
box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
border: 1px solid #ccc;
padding: 5px;
}
#sidebarWrap {
height: 400px;
width: 210px;
float: right;
position: relative;
box-shadow: none;
border: none;
margin: 0;
padding: 0;
}
#main {
width: 270px;
height: 4000px;
}
#footer {
clear: both;
margin: 10px 0;
}
#sidebar {
width: 200px;
height: 300px;
position: absolute;
}
#header {
height: 200px;
margin-bottom: 10px;
}
#sidebar.fixed {
position: fixed;
top: 0;
}
#footer { height: 600px; }
</style>
</head>
<body>
<div id="header">header</div>
<div id="sidebarWrap">
<div id="sidebar">Sidebar</div>
</div>
<div id="main">
Main
</div>
<div id="footer">
footer
</div>
</body>
</html>
<script src="../Js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));
var maxY = footTop - $('#sidebar').outerHeight();
$(window).scroll(function(evt) {
var y = $(this).scrollTop();
if (y > top) {
if (y < maxY) {
$('#sidebar').addClass('fixed').removeAttr('style');
} else {
$('#sidebar').removeClass('fixed').css({
position: 'absolute',
top: (maxY - top) + 'px'
});
}
} else {
$('#sidebar').removeClass('fixed');
}
});
});
</script>
------解决方案--------------------
完成
剛幫你客製化寫了個： http://jsfiddle.net/w7txx/6/
原碼請照實際情況去修改
最好用jQuery写
效果如图所示：
1、原始状态
2、浏览器向下滚动
3、继续向下
4、浏览器向上滚动
------解决方案--------------------
调用 document.documentElement.offsetTop 就可以,这个是你浏览器当前内容距离顶部的坐标
onscroll 和 onresize 你自己定义一下就可以
------解决方案--------------------
对了,div 记得 position:absolute
------解决方案--------------------
用position:fixed 试试呢
------解决方案--------------------
抄来的代码，参考下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>固定浮动侧边栏</title>
<style type="text/css">
body {
margin: 10px auto;
font-family: sans-serif;
width: 500px;
}
div {
border-radius: 5px;
box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
border: 1px solid #ccc;
padding: 5px;
}
#sidebarWrap {
height: 400px;
width: 210px;
float: right;
position: relative;
box-shadow: none;
border: none;
margin: 0;
padding: 0;
}
#main {
width: 270px;
height: 4000px;
}
#footer {
clear: both;
margin: 10px 0;
}
#sidebar {
width: 200px;
height: 300px;
position: absolute;
}
#header {
height: 200px;
margin-bottom: 10px;
}
#sidebar.fixed {
position: fixed;
top: 0;
}
#footer { height: 600px; }
</style>
</head>
<body>
<div id="header">header</div>
<div id="sidebarWrap">
<div id="sidebar">Sidebar</div>
</div>
<div id="main">
Main
</div>
<div id="footer">
footer
</div>
</body>
</html>
<script src="../Js/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));
var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));
var maxY = footTop - $('#sidebar').outerHeight();
$(window).scroll(function(evt) {
var y = $(this).scrollTop();
if (y > top) {
if (y < maxY) {
$('#sidebar').addClass('fixed').removeAttr('style');
} else {
$('#sidebar').removeClass('fixed').css({
position: 'absolute',
top: (maxY - top) + 'px'
});
}
} else {
$('#sidebar').removeClass('fixed');
}
});
});
</script>
------解决方案--------------------
完成
剛幫你客製化寫了個： http://jsfiddle.net/w7txx/6/
原碼請照實際情況去修改