We will now see that many networks will have a fixed layer effect, that is, when we are not out of date, it will be displayed normally, otherwise it will scroll down with the mouse.
I will introduce you to several instances below
| The Code is as follows: |
Copy code |
<! Doctype html>
<Html lang = "en">
<Head>
<Meta charset = "UTF-8">
<Title> Document </title>
<Script type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script>
<Script> Window. onload = function (){
$ (Window). scroll (function (){
Var sTop = $ (window). scrollTop ();
If (sTop> 100 ){
$ ('# Pinning'). show ();
} Else {
$ ('# Pinning'). hide ();
};;
});
}; </Script>
</Head>
<Body>
<Div id = "pinning" style = "display: none; position: fixed; top: 5px; left: 5px; width: 500px; height: 30px; border: 3px solid # ccc; text-align: right; "> fixed layer </div>
<Div style = "width: 500px; border: 1px solid #000; height: 3000px; "> content <br> br> This is the content <br> </div>
</Body>
</Html> |
Instance 2
| The Code is as follows: |
Copy code |
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
$ (Window). scroll (function (){
Var scrollTop = $ (document). scrollTop ();
Var headheight = $ (". head"). height ();
If (scrollTop> = headheight ){
$ ("# Fudong"). addClass ("fixed ");
} Else {
$ ("# Fudong"). removeClass ("fixed ");
}
})
})
</Script>
<Style>
* {Margin: 0; padding: 0}
* Html, * html body {background: url (about: blank) fixed}
# Wrap {width: 950px; height: 2000px; margin: 0 auto; border: 1px solid #000; position: relative}
# Wrap. head {height: 200px; background: # AA5F55}
# Fudong {width: 950px; height: 30px; background: # ccc ;}
. Fixed {position: fixed; _ position: absolute; top: 0; top: expression(eval(document.doc umentElement. scrollTop + 0 ))}
</Style>
</Head> <Body>
<Div id = "wrap">
<Div class = "head"> </div>
<Div id = "fudong"> 1111 </div>
</Div>
</Body>
</Html> |
