How to Add Animation to Translated Box in Merged Table Column on Scrooll
Can you please take a look at This Demo and let me know how I can add animation to the #map to always see it on view port while the table is in the view port? (some thing like sticky notes)
As you can see the position of the #map is hard coded in -100px at:
transform: rotate(-90deg) translate(-100px, -30px);but what I need to do is keeping the #map in view port until the table still presenting on scroll down or up
$(function() { });@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"); #map { display: inline-block; transform: rotate(-90deg) translate(-100px, -30px); color: #ed217c; white-space: nowrap; }<div style="height:300px; background:yellow">Scrool Drown Please</div> <table class="table"> <tr> <td rowspan="28"><span id="map">New Users</span></td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> <tr> <td>555 77 855</td> </tr> </table> <div style="height:300px;background:yellow">Scrool Up Please</div>