浮动的公告——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>

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