스크롤했을때, 상단고정 및 하단(특정위치)에 도착하면 고정풀림
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="Content-Type" content="text/html; charset=euc-kr"> <title><%= title %></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="http://www.tbctour.com/script/jquery-scrolltofixed.js" type="text/javascript"></script> <script> $(document).ready(function() { $('.header').scrollToFixed(); $('#summary').scrollToFixed({ marginTop: $('.header').outerHeight(true) + 0, limit: function() { var limit = $('.footer').offset().top - $('#summary').outerHeight(true) - 90; // header 높이만큼 줘야함 return limit; }, minWidth: 1000, zIndex: 999, fixed: function() { }, dontCheckForPositionFixedSupport: true }); }); </script> <style> .header { background-color: ; padding: 0; width: 100%; height:90px; border-bottom:1px solid #666666; } .contents { position:absolute; top:90px;width:100%; margin:auto;} .footer {width:100%; margin:auto} #summary { border: 0px solid #dddddd; position: relative; top: 0px; width: 200px; } </style> </head> <body topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0"> <div class="header"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="90">상단</td> </tr> </table> </div> <div class="contents"> <table width="990" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="770" height="2500" valign="top" bgcolor="#CCCCCC"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="300" bgcolor="#99FF00"> </td> </tr> <tr> <td><span class="toptext">본문</span></td> </tr> </table></td> <td width="20"></td> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="150" bgcolor="#FFCCFF"> </td> </tr> <tr> <td><div id="summary"> <table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFCC"> <tr> <td bgcolor="#999999"> </td> </tr> <tr> <td height="400"> </td> </tr> <tr> <td bgcolor="#666666"> </td> </tr> </table> </div></td> </tr> </table></td> </tr> </table> <div class="footer"> <table width="990" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td height="700" bgcolor="#333333"> </td> </tr> </table></div> </div> </body> </html>
