超长网页如何让右侧DIV跟随滚动窗口往下滚动？ 50
一个网页分为左右两侧，左侧内容较长一直往下滚动的话，右侧内容到一定程度就完全消失了，如何实现让右侧的最后一个DIV永远在可视窗口内呢？也就是滚动条滚到右侧最后一个DIV时...
一个网页分为左右两侧，左侧内容较长一直往下滚动的话，右侧内容到一定程度就完全消失了，如何实现让右侧的最后一个DIV永远在可视窗口内呢？也就是滚动条滚到右侧最后一个DIV时，这个DIV跟随滚动条一直往下滚动，但愿有人能明白我的意思，CSS能否实现jquery也行求完美解决方法。
展开
2个回答
展开全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>document</title>
<style type="text/css">
*{ margin:0; padding:0;}
body { font:12px/1.8 Arial; color:#666;}
h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
.go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; margin-top:20px; font-size:40px;}
.wrap{border:1px dashed #ccc; background:#f8f8f8; padding:20px;}
.demo { height:1500px; }
.float { width:200px; padding:5px 10px; border:1px solid #ffecb0; font-size:12px; background-color:#fffee0; -moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2); position:absolute; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.float .close-ico{ position:absolute; top:5px; right:5px; display:block; width:16px; height:16px; }
</style>
<script type="text/javascript" src="http://www.wufangbo.com/demo/jquery-1.4.4.min.js"></script>
</head>
<body>
<script type="text/javascript">
/**
* @author 愚人码头
* 类似于新浪微博新消息提示的定位框
* 更多
*/
(function($){
$.fn.capacityFixed = function(options) {
var opts = $.extend({},$.fn.capacityFixed.deflunt,options);
var FixedFun = function(element) {
var top = opts.top;
var right = ($(window).width()-opts.pageWidth)/2+opts.right;
element.css({
"right":right,
"top":top
});
$(window).resize(function(){
var right = ($(window).width()-opts.pageWidth)/2+opts.right;
element.css({
"right":right
});
});
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: "absolute",
top: top
});
}
});
element.find(".close-ico").click(function(event){
element.remove();
event.preventDefault();
})
};
return $(this).each(function() {
FixedFun($(this));
});
};
$.fn.capacityFixed.deflunt={
right : 100,//相对于页面宽度的右边定位
top:150,
pageWidth : 960
};
})(jQuery);
</script>
<div class="float" id="float">
<div style="height:200px; width:200px; border:1px solid red;">你是谁</div>
</div>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<script type="text/javascript">
$("#float").capacityFixed();
</script>
</div>
</body>
</html>
望采纳（好吧 这代码是我从别人那拿来的）
追问
跟上面一样的、、、你看看
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
是不是下面的效果：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
html, body {
width:100%;
margin:0px auto;
padding:0px auto;
}
.div1 {
height:2000px;
}
.div2 {
width:200px;
height:200px;
background-color:#3399FF;
margin-top:100px;
}
.div2_1{
position:fixed;
width:200px;
height:200px;
z-index:999;
background-color:#3399FF;
top:0px;
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop));
}
*html{
background-image:url(about:blank);
background-attachment:fixed;
}
</style>
<script type="text/javascript">
window.onscroll=function(){
var t=document.documentElement.scrollTop||document.body.scrollTop;
var div2=document.getElementById("div2");
if(t>= 100){
div2.className = "div2_1";
}else{
div2.className = "div2";
}
}
</script>
</head>
<body>
<div class="div1">
<div id="div2" class="div2"></div>
</div>
</body>
</html>
追问
不知道是我描述有问题还是咋的
你看看这个页面，http://www.chinaz.com/start/2014/0719/360327.shtml
往下拉右侧最后一个广告位，鼠标滑动到它的时候，这个广告位会跟随往下滑动，一直在视线范围内。
希望这样够清楚了，右侧最后一个百度联盟广告位，滚动条滑动到那个位置的时候，该广告位会跟着往下滑动。
追答
你发的这个页面没看到广告位有什么特殊的效果啊，我看右边的广告位都是跟着页面跑的，没有一直在视线内。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
