摘要:jQuery固定浮动侧边栏,这个功能现在应用的非常普遍,如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会出现一个固定跟随浏览器的DIV框,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
这个功能现在应用的非常普遍,如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会出现一个固定跟随浏览器的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'); } }); });
本文由职坐标整理发布,更多相关内容,请关注职坐标WEB前端jQuery频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号