jquery插件学习之元素顶部悬浮

程序员志鹏技术 2022年11月10日

0 收藏 320 点赞 4,712 浏览 1701 个字

jquery插件的学习：

HTML部分及应用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #float{border: 1px solid #e0e0e0; padding: 10px; position: absolute; width: 170px;}
    </style>
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/smartFloat.js"></script>
    <script>
        $(function(){
            //插件应用
            $("#float").smartFloat({width:"1024px"});//top:原始高度，pos:position的类型,width:到达顶部后的宽度，oWidth:最初的宽度
        });
    </script>
</head>
<body>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<div id="float">我到了顶部就悬浮</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>

js部分

/**
 * Created by Administrator on 14-9-3.
 */
;(function($){
    $.fn.extend({
        smartFloat:function(options){
            var defaults = {
                top:$(this).position().top,//原始高度
                pos:$(this).css("position"),//原始的postion类型
                width:"100%", //到达顶部后的宽度
                oWidth:$(this).width()//最初的宽度
            };
            var options = $.extend(defaults,options);
            var obj = $(this);
            $(window).scroll(function(){
                var scrolls = $(this).scrollTop();
                if(scrolls > options.top){
                    if(window.navigator.userAgent.indexOf('MSIE 6.0')!=-1){
                        obj.css({top:scrolls});
                    }else{
                        obj.css({
                            position: "fixed",
                            top: 0
                        });
                        obj.stop().animate({width:options.width});
                    }
                }else{
                    obj.css({
                        top:options.top,
                        position:""
                    });
                    obj.stop().animate({width:options.oWidth});
                }
            });
        }
    });
})(jQuery);