jquery如何实现边栏滚动固定跟随?
网友回复
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body{ font-size:80px; margin:0; padding:0; } .fl{ float:left; width: 70%; height: 2210px; background: pink; } .fr{ float:right; width: 29%; height: 1000px; background: cyan; } </style> </head> <body> <div class="fl">左边 <div style="color:red">1</div> <div style="color:orange">2</div> <div style="color:red">3</div> <div style="color:orange">4</div> <div style="color:red">5</div> <div style="color:blue">6</div> <div style="color:orange">7</div> <div style="color:red">8</div> <div style="color:orange">9</div> <div style="color:white">10</div> <div style="color:orange">11</div> <div style="color:red">12</div> <div style="color:green">13</div> <div style="color:red">14</div> <div style="color:orange">15</div> <div style="color:red">16</div> <div style="color:orange">17</div> <div style="color:red">18</div> <div style="color:white">19</div> <div style="color:orange">20</div> </div> <div class="fr">右边 <div style="color:red">1</div> <div style="color:orange">2</div> <div style="color:red">3</div> <div style="color:orange">4</div> <div style="color:red">5</div> <div style="color:blue">6</div> <div style="color:orange">7</div> <div style="color:red">8</div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.17.js"></script> <script> var sideHeight=$(".fr").height();//侧边栏的高度 $(window).scroll(function(){ var height=$(window).height();//显示的窗口的高度 var scrollTop=0; //为了兼容IE/谷歌/火狐 if($("body,html").scrollTop()>0){ scrollTop=$("body,html").scrollTop(); }else{ scrollTop=$("body").scrollTop(); } if(scrollTop+height>sideHeight){ $(".fr").css({ "position":"fixed", "right":0, "bottom":0 }); }else{ $(".fr").css({ "position":"static", }); } }) </script> </body> </html>