<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQ侧边栏固定和跟随</title> <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> .nav { width: 100%; height: 100px; background-color: #222; } .detail { width: 100%; height: 5000px; position: relative; background-color: #fff; } .detail-right { float: right; width: 50%; height: 100px; background-color: red; } .detail .fiesd-top { position: fixed; right: 0; top: 0; } .detail .fiesd-bottom { position: absolute; right: 0; bottom: 0; } .fotter { width: 100%; height: 1000px; background-color: yellow; } </style> </head> <body> <section class="detail"> <div class="nav"></div> <div class="detail-right"> </div> </section> <section class="fotter"></section> <script> $(window).scroll(function() { var t = $(document).scrollTop(); var r = $(".detail-right").height() var s = $(".detail").height(); s = s - r; if (t < 100) { $(".detail-right").removeClass('fiesd-top'); } else { $(".detail-right").addClass('fiesd-top'); } if (t > s) { $(".detail-right").removeClass('fiesd-top'); $(".detail-right").addClass('fiesd-bottom'); } else { $(".detail-right").removeClass('fiesd-bottom'); } }); </script> </body> </html>
