<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var stayBottom = function () {
///相对于浏览器的位置（浏览器的高度+滚动到上面看不到的高度-本身的高度=层顶部到浏览器最上面的高度）
var offsetTop = $(window).height() + $(window).scrollTop() - $("#bottomdiv").height() - 2 + "px";
//$("#bottomdiv").css("top", offsetTop);
$("#bottomdiv").animate({ top: offsetTop, "left": $(window).width() / 2 - $("#bottomdiv").width() / 2 }, { duration: 500, queue: false });
};
$(window).scroll(stayBottom).resize(stayBottom);//在浏览器滚动条变化或大小改变时调用
});
< /script>
< div id="bottomdiv" style="position: absolute; border-style: solid; border-width: thin;
border-color: Gray; height: 50px; bottom: 0;">
固定内容，实现层底部始终与浏览器底部相接，如果位置要往上移，offsetTop里面减去多少就是往上移多少，left里面加多少就是往右移多少
</div>
效果：
附：动态加载数据1(向上往下加载)。
//html
<div id="div_content3" class="Content3">
<input type="hidden" id="RefreshTime" value="0" /><!--刷新次数-->
<input type="hidden" id="CurIndex" value="0" /><!--当前页码-->
<input type="hidden" id="State" value="0" /><!---->
<input type="hidden" id="ClassID" value="@(ViewBag.ClassID)" />
<input type="hidden" id="ClassID2" value="@(ViewBag.ClassID2)" />
</div>
//js
var DynamicData = function () {
//窗口的高度+看不见的顶部的高度=最低部距离最顶部的高度
var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop());
//内容div顶部距顶部的高度+内容div本身的高度=内容div底部距离最顶部的高度
var divcontentButtomTop = parseInt($("#div_content3").offset().top) + parseInt($("#div_content3").height());
if (thisButtomTop > divcontentButtomTop) { div_more_click(); }
};
$(window).scroll(DynamicData).resize(stayBottom);
function div_more_click() {
var state = $("#State").val();
if (state == "" || state == "1") return false; //正在加载或数据库已无数据，不能再次查询
$("#State").val(""); //赋值为空
var CurIndex = parseInt($("#CurIndex").val());
var ClassID = $("#ClassID").val();
var ClassID2 = $("#ClassID2").val();
$.ajax({//ajax_begin
type: "post",
url: "/GetMore?d=" + new Date().getMilliseconds(),
data: { "pageindex": CurIndex + 1, "ClassID": ClassID, "ClassID2": ClassID2 },
dataType: "text",
error: function (jqXHR, textStatus, errorThrown) { alert('loading failed' + textStatus + errorThrown); },
success: function (data) {
if (data != "") {
$("#CurIndex").val(CurIndex + 1);
$("#State").val("0");
$("#div_content3").append(data);
}
else {
$("#div_more").hide();
$("#State").val("1");
$("#div_content3").append(data);
}
}
})//ajax_end
return false;
}
思路图：
附：动态加载数据2(处理屏幕可见区域时加载)。
var DynamicPic = function () {//动态加载
//窗口的高度+看不见的顶部的高度=屏幕低部距离最顶部的高度
var thisButtomTop = parseInt($(window).height()) + parseInt($(window).scrollTop());
var thisTop = parseInt($(window).scrollTop()); //屏幕顶部距离最顶部的高度
////内容div顶部距顶部的高度+内容div本身的高度=内容div底部距离最顶部的高度
//var divcontentButtomTop = parseInt($("#div_content3").offset().top) + parseInt($("#div_content3").height());
//if (thisButtomTop > divcontentButtomTop) { div_more_click(); }
$.each($("#LeftProject2 img,#LeftProject3 img,#RightContent img"), function (i, obj) {
var thisImg = $(this);
var PictureTop = parseInt(thisImg.offset().top);
//如果处理可见范围内，并且原图地址data-original不等于src,则加载图片
if (PictureTop >= thisTop && PictureTop <= thisButtomTop && thisImg.attr("data-original") != thisImg.attr("src")) {
thisImg.attr("src", thisImg.attr("data-original"));
}
});
};
$(window).scroll(DynamicPic).resize(DynamicPic);
//htm把真实路径放在data-original属性中，加载页面时不会加载图片，放一个默认的小图片grey.gif。
<img src="/Content/images/Imgpreview/grey.gif" data-original="/Content/images/convention/Conr_pic12.jpg"
width="316" height="180" />
<img src="/Content/images/Imgpreview/grey.gif" data-original="/Content/images/convention/Conr_pic11.jpg"
width="316" height="180" />
