jQuery固定浮动侧边栏实现思路及代码
程序员文章站
2022-06-13 10:36:31
这个功能现在应用的非常普遍,如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会出现一个固定跟随的div框,现思路是这样的:首先获取需要跟随的div距离页面顶部的距离,然后判断,...
这个功能现在应用的非常普遍,如果页面比较高,当滚动条拖到页面的下面的时候,侧边栏会出现一个固定跟随的div框,现思路是这样的:首先获取需要跟随的div距离页面顶部的距离,然后判断,当浏览器滚动的距离大于该div本身距离顶部距离的时候,则添加css属性fixed即可。
代码如下
html代码:
<p id="header">header</p> <p id="sidebarwrap"> <p id="sidebar">sidebar</p> </p> <p id="main">main</p> <p id="footer">footer</p>
css代码:
body { margin: 10px auto; font-family: sans-serif; width: 500px; } p { 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'); } }); });
上一篇: 怎样写一个拼写检查器 (python)
下一篇: python正则表达式的用法