I added a Facebook like button to my website.My website has a fixed div on top of the page(blue color div in the image). The like button is below that(in a div which can scroll)
My problem is when the page is scroll down the like button comes on top of the fixed div(blue color).I want to scroll it from the backside of the div.How can I do that?
There are couple of screenshots I added
Before Scroll
After Scroll
Here is my code of the fixed div
<script type="text/javascript">
function got_to_signup(){
window.location.href = "view/policy";
}
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=368003049941951";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div style="width:100%;background-color:#0094d6;" >
<div id="dd" style="background-color:#0094d6; width:100%; height:75px;position:fixed; " class="center "><div id="a" style="width:1010px; height:75px; background-color:#000000;background:url(xx.png); background-repeat:no-repeat; font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#003; " class="inner div_border">
<table width="1010" border="0" >
<tr >
<td width="15%" rowspan="2"><a href="" style="cursor:pointer; cursor:hand;"><div style="width:200px; height:50px;background-color:none;"></div></a></td>
<td width="22%" height="14"> </td>
<td width="5%"> </td>
<td width="5%"> </td>
<td width="28%"> </td>
<td width="2%"> </td>
<td width="23%"> </td>
</tr>
<tr>
<td colspan="4">
</td>
<td colspan="2"><span style="float: right; " ><div style="background-color:#006d9e;border-radius:3px; width:250px; height:34px; display: table;
vertical-align: middle; color:#FFF; ">
<table width="100%" border="0" >
<tr >
<td width="43%" style="text-align:center"> Start to bump !</td>
<td width="29%"><div id='basic-modal'><span style="float: right; " ><input name="login_btn" type="button" class="login_button basic" id="login_btn" value="Sign in" /></span></div></td>
<td width="28%"><span style="float: right; " ><form id="form_reg" method="post"><input name="register_btn" type="button" class="register_button" id="register_btn" value="Sign up" onclick="got_to_signup()"/></form></span></td>
</tr>
</table>
</div></span></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td style="color:#FFF; font:Arial, Helvetica, sans-serif; font-size:9px; text-align:right;"> Beta Version </td>
</tr>
</table>
</div></div></div>
here is my facebook like button code
</script>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=368003049941951";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<td height="21" colspan="2"> <table width="187" style="margin-left:3px;font-size:1px;background-image:url(share_back.png);background-repeat:no-repeat;border-radius:3px;" >
<!--tweeter button-->
<tr><td width="71"><a href="https://twitter.com/bump_lk" class="twitter-follow-button" data-show-count="
false" style="float:right;">Follow @bump_lk</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></td>
<!--facebook like button-->
<td width="48"><div class="fb-like" data-href="https://www.facebook.com/Bump.lk" data-send="
false" data-layout="button_count" data-width="10" data-show-faces="
false" style="position:relative;"></div>
</td></tr></table></td>
<td> </td>
<td> </td>
<td >
