夏日博客

A-A+

jQuery固定浮动侧边栏(jQuery fixed Sidebar)

2016年01月07日 前端设计 暂无评论 阅读 5 views 次

这个功能现在应用的非常普遍，如果页面比较高，当滚动条拖到页面的下面的时候，侧边栏会出现一个固定跟随浏览器的DIV框，现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。

这个功能现在应用的非常普遍，如果页面比较高，当滚动条拖到页面的下面的时候，侧边栏会出现一个固定跟随浏览器的DIV框，现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可,代码如下:

  1. HTML代码：  
  2. <div id="header">header</div>  
  3. <div id="sidebarWrap">  
  4. <div id="sidebar">Sidebar</div>  
  5. </div>  
  6. <div id="main">Main</div>  
  7. <div id="footer">footer</div>  
  8. CSS代码：  
  9. body {  
  10.     margin: 10px auto;  
  11.     font-family: sans-serif;  
  12.     width: 500px;  
  13. }  
  14. div {  
  15.     border-radius: 5px;  
  16.     box-shadow: 1px 2px 5px rgba(0,0,0,0.3);  
  17.     border: 1px solid #ccc;  
  18.     padding: 5px;  
  19. }  
  20. #sidebarWrap {  
  21.     height: 400px;  
  22.     width: 210px;  
  23.     float: right;  
  24.     position: relative;  
  25.     box-shadow: none;  
  26.     border: none;  
  27.     margin: 0;  
  28.     padding: 0;  
  29. }  
  30. #main {  
  31.     width: 270px;  
  32.     height: 4000px;  
  33. }  
  34. #footer {  
  35.     clear: both;  
  36.     margin: 10px 0;  
  37. }  
  38. #sidebar {  
  39.     width: 200px;  
  40.     height: 300px;  
  41.     position: absolute;  
  42. }  
  43. #header {  
  44.     height: 200px;  
  45.     margin-bottom: 10px;  
  46. }  
  47. #sidebar.fixed {  
  48.     position: fixed;  
  49.     top: 0;  
  50. }  
  51. #footer { height: 600px; }  
  52. #footer { height: 600px; }  
  53. JavaScript代码：  
  54. $(function() {  
  55.     var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0));  
  56.     var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0));  
  57.     var maxY = footTop - $('#sidebar').outerHeight();  
  58.     $(window).scroll(function(evt) {  
  59.         var y = $(this).scrollTop();  
  60.         if (y > top) {  
  61.             if (y < maxY) {  
  62.                 $('#sidebar').addClass('fixed').removeAttr('style');  
  63.             } else {  
  64.                 $('#sidebar').removeClass('fixed').css({  
  65.                     position: 'absolute',  
  66.                     top: (maxY - top) + 'px'  
  67.                 });  
  68.             }  
  69.         } else {  
  70.             $('#sidebar').removeClass('fixed');  
  71.         }  
  72.     });  
  73. });  
标签：

给我留言