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

2025-01-07 07:41:27

推荐回答（2个）

回答1：





document
 
*{ 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; }
 





/**
 * @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);



 
    你是谁

哥是来占位的

$("#float").capacityFixed();

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

回答2：

是不是下面的效果：

 
 



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;
}



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";
    } 
}