javascript - How to dynamic set top css when element over top page or bottom page? -


How to do dynamic set top css of the element on top page or bottom page?

First of all, the first cat image above the mouse is fine.

  http://image.ohozaa.com/i/480/7YpWei.jpg  < / Pre> 

When I scroll down the page and the first cat image to MMS again,

  http://image.ohozaa.com/i/5b5/l2l3dj.jpg  

Code> http://image.ohozaa.com/i/5db/ezZE1b.jpg <

index.php

  & lt ;! DOCTYPE HTML PUBLIC "- // W3C / / DTD HTML 4.01 // N" "http://www.w3.org/TR/html4/strict.dtd"> & Lt; Top & gt; & Lt; Script src = "http://code.jquery.com/jquery-1.10.1.min.js" & gt; & Lt; / Script & gt; & Lt; Style type = "text / css" & gt; & Lt ;? For PHP ($ i = 0; $ i & lt; 3; $ i ++) {? & Gt; .top_box & lt ;? PHP resonance $ i; ? & Gt; {LEFT: 99px; Top: 0 pixels; Status: Completed; Limit: 1px solid # 000; display none; } & Lt ;? PHP}? & Gt; & Lt; / Style & gt; & Lt ;? For PHP ($ i = 0; $ i & lt; 3; $ i ++) {? & Gt; & Lt; Script type = "text / javascript" & gt; $ (Document) .ready (function () {$ ("# thumbnail & lt ;? php $ e ;? & gt; make EPO"). Hover (function () {var id = $ (this). Data (" Id "); if (id! == undefined) {$ (" # "+ ID). Show ();} $ (" #top_box <"PHP; $ i & # 39;; echo;). Show ();}, Function () {$ ("#top_box <" PHP $ e ;? & gt; "echo"). Hide ();});}); & Lt; / Script & gt; & Lt ;? PHP}? & Gt; & Lt; / Head & gt; & Lt; Br> Br> Br> Br> & Lt; & Lt; & lt & lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; Br> & Lt; div style = "float: left; position: relative, width: 100%; margin-bottom: 200px;" & Gt; & Lt; Div id = "top_box0" class = "top_box0" & gt; & Lt; img src = "http://consciouscat.net/wp-content/uploads/2010/02/cat-licks-lips-200px.jpg" & gt; & Lt; / Div & gt; & Lt; span id = "thumbnail0" style = "margin: 7px; position: relative;" & Gt; & Lt; Img border = "0" src = "http://consciouscat.net/wp-content/uploads/2010/02/cat-licks-lips-200px.jpg" width = "80" height = "80" /> ; & Lt; / Span & gt; & Lt; / Div & gt; & Lt; Br> & Lt; div style = "float: left; position: relative, width: 100%; margin-bottom: 200px;" & Gt; & Lt; Div id = "top_box1" class = "top_box1" & gt; & Lt; img src = "http://cat-bounce.com/cb.png" & gt; & Lt; / Div & gt; & Lt; Span id = "thumbnail1" style = "margin: 7px; position: relative;" & Gt; & Lt; img border = "0" src = "http://cat-bounce.com/cb.png" width = "80" height = "80" /> & Lt; / Span & gt; & Lt; / Div & gt; & Lt; Br> & Lt; div style = "float: left; position: relative, width: 100%; margin-bottom: 200px;" & Gt; & Lt; Div id = "top_box2" class = "top_box2" & gt; & Lt; img src = "http://media.yopi.co.th/prod_pics/12/e/12827.jpg" & gt; & Lt; / Div & gt; & Lt; span id = "thumbnail2" style = "margin: 7px; position: relative;" & Gt; & Lt; img border = "0" src = "http://media.yopi.co.th/prod_pics/12/e/12827.jpg" width = "80" height = "80" /> & Lt; / Span & gt; & Lt; / Div & gt;    

You can set CSS to decide like this: however if you do cats In the position of the "Top Pages" / "Bottom Page" at the top of the images are displayed next to the images next to the images set and in case of status it is determined.

  .top_box0 {left: 99px; Top: 0 pixels; Status: fixed; Limit: 1px solid # 000; display none; } .top_box1 {left: 99px; Top: 0 pixels; Status: fixed; Limit: 1px solid # 000; display none; } .top_box2 {left: 99px; Top: 0 pixels; Status: fixed; Limit: 1px solid # 000; display none; }    

Comments

Popular posts from this blog

php - PDO bindParam() fatal error -

logging - How can I log both the Request.InputStream and Response.OutputStream traffic in my ASP.NET MVC3 Application for specific Actions? -

java - Why my included JSP file won't get processed correctly? -