你的位置:首页 > Java教程

[Java教程]jQuery实现页面滚动时智能浮动定位


<!DOCTYPE html>
<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;
        }

        .wrap {
            border: 1px dashed #ccc;
            background: #f8f8f8;
            padding: 20px;
        }

        .demo {
            height: 1500px;
        }

        .float {
            width: 80px;
            padding: 10px;
            border: 1px solid #ffecb0;
            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;
            right: 10%;
            top: 131px;
        }
    </style>
    <script type="text/javascript" src="../..content/js/jquery-1.4.4.min.js"></script>
</head>
<body>

    <h1 >jQuery实现页面滚动时层智能浮动定位_前端开发</h1>
    <div >
        <div ></div>
        <div id="float">我在这里等你噢!</div>
    </div>
    <script type="text/javascript">
        $.fn.smartFloat = function () {
            var position = function (element) {
                var top = element.position().top, pos = element.css("position");
                $(window).scroll(function () {
                    var scrolls = $(this).scrollTop();
                    if (scrolls > top) {
                        if (window.                            element.css({
                                position: "fixed",
                                top: 0
                            });
                        } else {
                            element.css({
                                top: scrolls
                            });
                        }
                    } else {
                        element.css({
                            position: pos,
                            top: top
                        });
                    }
                });
            };
            return $(this).each(function () {
                position($(this));
            });
        };
        //绑定
        $("#float").smartFloat();
    </script>
    </div>
    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-20541395-2']);
        _gaq.push(['_trackPageview']);
        (function () {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0];
            s.parentNode.insertBefore(ga, s);
        })();
    </script>
</body>
</html>