这个功能现在应用的非常普遍,如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会出现一个固定跟随浏览器的DIV框,现思路是这样的:首先获取需要跟随的DIV距离页面顶部的距离,然后判断,当浏览器滚动的距离大于该DIV本身距离顶部距离的时候,则添加CSS属性fixed即可。
代码如下
HTML代码:
<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代码:
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代码:
$(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'); } }); });
您可能感兴趣的文章:
- 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
- Jquery实现侧边栏跟随滚动条固定(兼容IE6)
- jQuery侧边栏随窗口滚动实现方法
- jquery仿京东侧边栏导航效果
- jquery实现侧边栏左右伸缩效果的示例
- jQuery实现智能判断固定导航条或侧边栏的方法
- jQuery侧边栏实现代码
- 基于jQuery倾斜打开侧边栏菜单特效代码
- Jquery实现显示和隐藏的4种简单方式
- JQuery显示、隐藏div的几种方法简明总结
- jQuery实现侧边栏隐藏与显示的方法详解