Jquery實現相對瀏覽器位置固定、懸浮
<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" />
Jquery實現相對瀏覽器位置固定、懸浮