Response title
This is preview!
How to Add Animation to Translated Box in Merged Table Column on Scrooll
in Using jQuery
•
6 years ago
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>
1