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