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)" />

//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");

            }

        })//ajax_end

        return false;

    }

思路圖：

附：動态加載資料2(處理螢幕可見區域時加載)。

        var DynamicPic = function () {//動态加載

            //視窗的高度+看不見的頂部的高度=螢幕低部距離最頂部的高度

            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"