侧边栏固定?很简单的能想到是用position: fixed;实现。怎么实现下滑到底部footer页面停止固定效果呢。
解决方案:在到达底部的时候取消fixed固定定位换absolute绝对定位
代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
| <html> <body> <div style="position: relative; width: 200px; height: 2000px; border: 1px solid; display: inline-block;"> <div class="left" style=" border: 0px solid; width: 200px; height: 600px; background: red;"> </div> </div> <div style="width: 600px; height: 2000px; border: 1px solid; display: inline-block;"> </div> <div class="footer" style="width: 100%; height: 200px; border: 1px solid;"> </div> </body> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <style type="text/css"> .fixed{ position: fixed; top:0px; } .abs{ position: absolute; bottom:0px; } </style> <script type="text/javascript"> $(document).ready(function(){ var loaded = true; var loaded2 = true; var top = $(".left").offset().top; var height = $(".left").outerHeight(true) + $(".footer").outerHeight(true); console.log(height); var down = $(document).height() - top - height; function Add_Data() { var scrolla=$(window).scrollTop(); var cha=parseInt(top)-parseInt(scrolla); var chb=parseInt(down)-parseInt(scrolla); console.log(chb); if(loaded && cha<=0) { $(".left").addClass("fixed"); loaded=false; } if(!loaded && cha>0) { $(".left").removeClass("fixed"); loaded=true; } if(loaded2 && chb<=0) { $(".left").removeClass("fixed"); $(".left").addClass("abs"); loaded2=false; } if(!loaded2 && chb>0) { $(".left").removeClass("abs"); $(".left").addClass("fixed"); loaded2=true; } } $(window).scroll(Add_Data); }); </script> </html>
|
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦