JQuery实现fixed固定div--同固定表头

最新推荐文章于 2021-11-29 13:12:18 发布
yyutudou
最新推荐文章于 2021-11-29 13:12:18 发布
阅读量989
点赞数
分类专栏： Js/JQuery/Css/HTML
本文链接：https://blog.csdn.net/yuyangweiwei/article/details/8795752
版权
Js/JQuery/Css/HTML 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>右侧固定漂浮</title>
    <style type="text/css">
        .plateR
        {
            float: right;
            display: inline;
            position: relative;
            zoom: 1;
            border:2px solid red;
        }
        #rightmenu li
        {
            font-size: 13px;
        }
        li
        {
            font-size: 10pt;
            font-style: normal;
            width: 180px;
            table-layout: fixed;
            word-wrap: break-word;
        }
        a:visited, a:active, a:link
        {
            color: #2E9CE9;
            text-decoration: none;
        }
    </style>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        //检查浏览器是否支持fixed样式
        $.support.fixed = !document.all || document.all && document.compatMode == "CSS1Compat" && window.XMLHttpRequest;
        $(document).ready(function () {
            //jQuery 扩展方法 
            // 随滚动条滑动而滑动
            if (typeof (jQuery) != "undefined") {
                jQuery.fn.extend({
                    scrollFollow: function (opts) {
                        var os = this;
                        //默认参数定义
                        //动画持续时间
                        var duration = 200;
                        //上边距
                        var offset = 60;

                        //获取函数传入的参数
                        if (opts) {
                            if (!isNaN(opts.duration)) {
                                duration = parseInt(opts.duration);
                            }
                            if (!isNaN(opts.offset)) {
                                offset = parseInt(opts.offset);
                            }
                        }
                        //定义css默认属性，预处理
                        os.each(function () {
                            var o = $(this);
                            o.css('position', 'absolute').appendTo('body');
                        });

                        var wnd = $(window);
                        //响应滚动条滚动事件
                        $(window).scroll(function () {
                            var scrollPos = wnd.scrollTop();
                            if (scrollPos > 210) {
                                if ($.support.fixed) {
                                    var refixed = function () {
                                        var wnd = $(window);
                                        var scrollLeft = (wnd.width() + wnd.scrollLeft() - 780) / 2 + 879;
                                        $('#divEditresume_r').css({ position: 'fixed', top: 0, left: scrollLeft });
                                    };
                                    refixed();
                                } else {
                                    os.stop();
                                    os.each(function () {
                                        var o = $(this);
                                        var callback = function () {
                                            for (var i in os.depend) {
                                                try {
                                                    os.depend[i]();
                                                } catch (e) { continue; }
                                            }
                                        };
                                        o.animate({ 'top': scrollPos }, duration, callback);
                                    });

                                }
                            }
                            else {
                                if ($.support.fixed) {
                                    var refixed = function () {
                                        var wnd = $(window);
                                        var scrollLeft = (wnd.width() + wnd.scrollLeft() - 780) / 2 + 879;
                                        $('#divEditresume_r').css({ position: 'fixed', top: offset - scrollPos, left: scrollLeft });
                                    };
                                    refixed();
                                } else {
                                    os.stop();
                                    os.each(function () {
                                        var o = $(this);
                                        var callback = function () {
                                            for (var i in os.depend) {
                                                try {
                                                    os.depend[i]();
                                                } catch (e) { continue; }
                                            }
                                        };
                                        o.animate({ 'top': offset }, duration, callback);
                                    });
                                }
                            }
                        });
                        return this;
                    },
                    depend: new Array(),
                    addDepend: function (fn) {
                        this.depend.push(fn);
                    }
                });
            }
            //绑定滚动事件
            $('#divEditresume_r').scrollFollow({ duration: 200, offset: 210 });
            //设置起始位置
            remove();
            //浏览器的宽度发送改变时重新设置其样式
            $(window).resize(function () {
                remove();
            });
        });

        function remove() {
            var w = document.body.clientWidth;
            //获取浏览器的宽度
            var wnd = $(window);
            //获取简历操作菜单的宽度
            var resumeOperate = 170;
            //设置初始位置
            var position = function () {
                var scrollTop = wnd.scrollTop() + 210;
                var scrollLeft = (wnd.width() + wnd.scrollLeft() - 780) / 2 + 879;
                $('#divEditresume_r').css({ top: scrollTop + 'px', left: scrollLeft + 'px' });
            }
            var init = function () {
                position();
            }
            init();
        }
    </script>
</head>
<body style="height: 2000px;">
    <div class="plateR" id="divEditresume_r">
        <ul>
            <li><a href="http://www.cnblogs.com/yuyangweiwei/archive/2013/01/29/2880959.html">1.
                vs.net代码段管理器应用(0)</a></li>
            <li><a href="http://www.cnblogs.com/yuyangweiwei/archive/2012/06/01/2530928.html">2.
                后台添加css和js(0)</a></li>
            <li><a href="http://www.cnblogs.com/yuyangweiwei/archive/2012/06/01/2530810.html">3.
                js屏蔽鼠标键盘(0)</a></li>
            <li><a href="http://www.cnblogs.com/yuyangweiwei/archive/2012/04/10/2439990.html">4.
                asp.net去除字符串中html标签(0)</a></li>
        </ul>
    </div>
</body>
</html>
yyutudou
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery实现fixed固定div--同固定表头

右侧固定漂浮 .plateR { float: right; display: inline; position: relative; zoom: 1; border:2px solid red; } #r
复制链接

扫一扫
专栏目录