超长网页如何让右侧DIV跟随滚动窗口往下滚动?

发布网友发布时间：2022-05-06 04:00

共3个回答

懂视网时间：2022-05-13 01:39

无标题文档我想让test3这个div随着网页的下拉滚动而随着滚动，求js代码。

回复讨论(解决方案)

其实不需要js代码也行，用CSS固定定位

参考下

无标题文档 我想让test3这个div随着网页的下拉滚动而随着滚动，求js代码。

热心网友时间：2022-05-12 22:47

<!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>

望采纳（好吧  这代码是我从别人那拿来的）

追问跟上面一样的、、、你看看

热心网友时间：2022-05-13 00:05

是不是下面的效果：

<!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

往下拉右侧最后一个广告位，鼠标滑动到它的时候，这个广告位会跟随往下滑动，一直在视线范围内。

希望这样够清楚了，右侧最后一个百度联盟广告位，滚动条滑动到那个位置的时候，该广告位会跟着往下滑动。

追答你发的这个页面没看到广告位有什么特殊的效果啊，我看右边的广告位都是跟着页面跑的，没有一直在视线内。