思路页面滚动时,动态调整元素的位置和相关样式。可以将其封装为一个函数,然后对需要的元素绑定该函数。
例如下面的效果:
当页面滚动后,浮动区域不会超出顶部,但其他内容照常往上滚动。
Html源码如下:
<html> <script src='jquery-1.12.4.min.js'></script> <style> td{ vertical-align:top; } </style> <body> <table><tr><td> 1.其他内容<br/> 2.其他内容<br/> 3.其他内容<br/> 4.其他内容<br/> 5.其他内容<br/> 6.其他内容<br/> 7.其他内容<br/> 8.其他内容<br/> 9.其他内容<br/> 10.其他内容<br/> 11.其他内容<br/> 12.其他内容<br/> 13.其他内容<br/> 14.其他内容<br/> 15.其他内容<br/> 16.其他内容<br/> 17.其他内容<br/> 18.其他内容<br/> </td> <td> <br/> <br/> <br/> <div style="background-color:#0f0; margin-left:200px; width:300px; height:100px;" id="popArea">浮动区域</div> </td> </tr> </table> </body> </html> <script type="text/javascript"> $(function() { $("#popArea").smartFloat(); });
评论