浮动的公告——jQuery简单实现

        这是前一段时间维护考试系统碰到一个问题，就是浮动的考试公告。当时JS和jQuery都还没学，依照原有功能，依葫芦画瓢最终实现，但是对其中的细节不甚了解，刚浅学完JavaScript，又接触jQuery，所以重新注释此功能。

界面：

head：

     <title>浮动公告</title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <link href="css/ExatMan.css" rel="stylesheet" type="text/css" />

body：

 <div id="examInfo" runat="server">
        欢迎使用在线考试系统
        <hr />
        <asp:Label ID="lblStudentName" runat="server"></asp:Label>
        <hr />
        剩余时间：
        <asp:TextBox ID="txtTime" runat="server" Enabled="False"></asp:TextBox>
        <hr />
        请同学认真阅读考试须知：
        <br />
        <asp:Label ID="lblExaminationInstruction" runat="server" ForeColor="Red"></asp:Label>
        <br />
        <hr />
    </div>

JavaScript：

    <script type="text/javascript">
            $(function () {
                 //根据id选择器定义examInfo的jQuery对象
                var $sidebar = $("#examInfo"),
                $window = $(window),
                //获取examInfo在当前窗口的相对偏移
                offset = $sidebar.offset(),
                //自定义，作为偏移量
                topPadding = 15;
                //绑定滚动事件
                $window.scroll(function () {
                        if ($window.scrollTop() > offset.top) {
                                //判断当前位置，如果相对于滚动条顶部偏移大于对窗口的偏移量，调整外上边距
                                $sidebar.stop().animate({
                                    //重新定位examInfo
                                            marginTop: $window.scrollTop() - offset.top + topPadding
                                    });
                            } else {
                                    //如果当前如果相对于滚动条顶部偏移小于对窗口的偏移量，外上边距为零
                                    //自定义动画，指定的属性必须用骆驼形式
                                    $sidebar.stop().animate({
                                            marginTop: 0
                                    });
                            }
                    });
            });
            </script>

运行结果：公告可以随着滚动条的移动动态定位到页面左上部分。