| 标题 | jQuery固定浮动侧边栏实现思路及代码 |
| 内容 | 这个功能现在应用的非常普遍，如果页面比较高，当滚动条拖到页面的下面的时候，侧边栏会出现一个固定跟随浏览器的DIV框，现思路是这样的：首先获取需要跟随的DIV距离页面顶部的距离，然后判断，当浏览器滚动的距离大于该DIV本身距离顶部距离的时候，则添加CSS属性fixed即可。 代码如下: HTML代码： ?123456 <div id="header">header</div> <div id="sidebarWrap"> <div id="sidebar">Sidebar</div> </div> <div id="main">Main</div> <div id="footer">footer</div> CSS代码： ?1234567891011121314151617181920212223242526272829303132333435363738394041424344 body { margin: 10px auto; font-family: sans-serif; width: 500px; } div { border-radius: 5px; box-shadow: 1px 2px 5px rgba(0,0,0,0.3); border: 1px solid #ccc; padding: 5px; } #sidebarWrap { height: 400px; width: 210px; float: right; position: relative; box-shadow: none; border: none; margin: 0; padding: 0; } #main { width: 270px; height: 4000px; } #footer { clear: both; margin: 10px 0; } #sidebar { width: 200px; height: 300px; position: absolute; } #header { height: 200px; margin-bottom: 10px; } #sidebar.fixed { position: fixed; top: 0; } #footer { height: 600px; } #footer { height: 600px; } JavaScript代码： ?12345678910111213141516171819202122 $(function() { var top = $('#sidebar').offset().top - parseFloat($('#sidebar').css('marginTop').replace(/auto/, 0)); var footTop = $('#footer').offset().top - parseFloat($('#footer').css('marginTop').replace(/auto/, 0)); var maxY = footTop - $('#sidebar').outerHeight(); $(window).scroll(function(evt) { var y = $(this).scrollTop(); if (y > top) { if (y < maxY) { $('#sidebar').addClass('fixed').removeAttr('style'); } else { $('#sidebar').removeClass('fixed').css({ position: 'absolute', top: (maxY - top) + 'px'}); } } else { $('#sidebar').removeClass('fixed'); } }); }); |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。