欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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');
}
});
});