jQuery实现页面下拉后元素固定在顶部

文章描述:

当页面下拉后元素还是固定在顶部

 

js

$(".fixed-content").each(function() {
    var o = this;
    var timeout = null;
    var offset_top = $(o).offset().top;
    $(o).css({
        "width": $(o).width(),
        "height": $(o).height()
    });
    $(window).scroll(function() {
        clearTimeout(timeout);
        if ($("body").get(0).getBoundingClientRect().top <= -(offset_top + 10)) {
            if ($.browser.msie && $.browser.version < 8) {
                timeout = setTimeout(function() {
                    $(o).css({
                        "position": "absolute",
                        "z-index": 1000,
                        "left": $(o).offset().left
                    }).animate({
                        "top": -$("body").get(0).getBoundingClientRect().top
                    }).addClass("col-fixed");
                },
                200);
            } else {
                $(o).css({
                    "position": "fixed",
                    "top": 0,
                    "z-index": 1000,
                    "left": $(o).offset().left
                }).addClass("col-fixed");
            }
        } else {
            $(o).css({
                "position": "relative",
                "top": 0,
                "left": 0
            }).removeClass("col-fixed");
        }
    });
});

 

发布时间:2021/07/13

发表评论