jQuery实现页面滚动时层智能浮动定位

最新推荐文章于 2021-06-03 06:55:19 发布

浪仙

最新推荐文章于 2021-06-03 06:55:19 发布

阅读量2.9k

点赞数 1

分类专栏： GridView 文章标签： jquery function class border float div

本文链接：https://blog.csdn.net/love33jing2012/article/details/7465783

版权

GridView 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现页面滚动时层智能浮动定位小插件</title>
<style type="text/css">
*{ margin:0; padding:0;}
body { font:12px/1.8 Arial; color:#666;}
h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
.go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; margin-top:20px; font-size:40px;}
.wrap{border:1px dashed #ccc; background:#f8f8f8; padding:20px;}

.demo { height:1500px; }
.float { width:200px; padding:5px 10px; border:1px solid #ffecb0; font-size:12px; background-color:#fffee0; -moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); -webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2); position:absolute; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; }
.float .close-ico{ position:absolute; top:5px; right:5px; display:block; width:16px; height:16px; }
</style>
<script type="text/javascript" src="http://www.lizhoumin.com/js.js"></script>

</head>
<body>

<h1 class="tit-h1">jQuery实现页面滚动时层智能浮动定位</h1>
<div style="width:960px; margin:0 auto;"><p style="font-size:20px; color:#f00; background:#000; color:#fff; text-align:center; font-weight:800;">与别人分享快乐，你的快乐就会加倍，与别人分担痛苦，你的痛苦就会减半。</p></div>

<div class="wrap">
<script type="text/javascript">
(function($){
    $.fn.capacityFixed = function(options) {
        var opts = $.extend({},$.fn.capacityFixed.deflunt,options);
        var FixedFun = function(element) {
            var top = opts.top;
            var right = ($(window).width()-opts.pageWidth)/2+opts.right;
            element.css({
                "right":right,
                "top":top
            });
            $(window).resize(function(){
                var right = ($(window).width()-opts.pageWidth)/2+opts.right;
                element.css({
                    "right":right
                });
            });
            $(window).scroll(function() {
                var scrolls = $(this).scrollTop();
                if (scrolls > top) {

                    if (window.XMLHttpRequest) {
                        element.css({
                            position: "fixed",
                            top: 0
                        });
                    } else {
                        element.css({
                            top: scrolls
                        });
                    }
                }else {
                    element.css({
                        position: "absolute",
                        top: top
                    });
                }
            });
            element.find(".close-ico").click(function(event){
                element.remove();
                event.preventDefault();
            })
        };
        return $(this).each(function() {
            FixedFun($(this));
        });
    };
    $.fn.capacityFixed.deflunt={
  right : 100,//相对于页面宽度的右边定位
        top:150,
        pageWidth : 960
};
})(jQuery);
</script>

</div>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>

<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>

<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<p>哥是来占位的</p>
<script type="text/javascript">
$("#float").capacityFixed();
</script>

</div>
<div style="height:500px;"></div>
</body>
</html>

浪仙

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery实现页面滚动时层智能浮动定位

jQuery实现页面滚动时层智能浮动定位小插件 *{ margin:0; padding:0;}body { font:12px/1.8 Arial; color:#666;}h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}.go-back{ text-align:ce
复制链接

扫一扫