Floating announcement-simple jquery implementation

This is a problem encountered when the examination system was maintained some time ago, that is, the floating examination announcement. At that time, neither JS nor jquery had been learned. Based on the original functions, it was implemented based on the Huludao scheme. However, I didn't know much about the details. I just learned JavaScript and came into contact with jquery, So I re-commented on this function.

Interface:

Head:

<Title> floating announcement </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"> welcome to the online examination system <HR/> <asp: label id = "lblstudentname" runat = "server"> </ASP: Label> <HR/> remaining time: <asp: textbox id = "txttime" runat = "server" enabled = "false"> </ASP: textbox> <HR/> Read the exam carefully. Note: <br/> <asp: Label id = "lblexaminationinstruction" runat = "server" forecolor = "red"> </ASP: label> <br/> <HR/> </div>

Javascript:

<SCRIPT type = "text/JavaScript"> $ (function () {// defines the jquery object var $ sidebar =$ ("# examinfo") of examinfo Based on the ID selector "), $ window = $ (window), // obtain the relative offset of examinfo in the current window = $ sidebar. offset (), // custom, as offset toppadding = 15; // bind rolling event $ window. scroll (function () {if ($ window. scrolltop ()> offset. top) {// determine the current position. If the offset relative to the top of the scroll bar is greater than the offset to the window, adjust the outer margin $ sidebar. stop (). animate ({// reposition examinfo margintop: $ window. scrolltop ()-offset. top + toppadding});} else {// if the current offset relative to the top of the scroll bar is less than the offset to the window, the top margin is zero // custom animation, the specified property must be in the form of $ sidebar. stop (). animate ({margintop: 0}) ;}}) ;}); </SCRIPT>

Running result:The announcement can be dynamically positioned to the top left of the page as the scroll bar moves.