更多jQuery常用插件使用请访问：jQuery常用插件汇总
jQuery自定义插件之吸顶条效果是网页中最常见不过的插件了，所以写一个自用的jQuery自定义插件之吸顶条效果插件，偷懒一下。
上源码，想用的直接复制走，保存在一个js文件即可使用。
效果插件源码
/*
* @Author: JiaoShou
* @Date: 2020-07-09 16:46:34
* @Last Modified by: JiaoShou
* @Last Modified time: 2020-07-09 16:46:34
*/
/**
* 固定导航条
* @Author jiaoshou
* @DateTime 2015-11-16T13:50:38+0800
* @param {number} left 默认值，距离屏幕左边的距离
* @param {number} top 默认值，距离屏幕顶边的距离
* @param {number} right 可选项，距离屏蔽右边的距离
* @param {number} bottom 可选项，距离屏蔽下边的距离
*/
;(function(window,$,undefined){
$.fn.extend({
'topbar' : function(option){
var defaults={
'left':0, //默认选项，fixed时候距离屏幕左边的距离，不带单位的number
'top':0, //默认选项，fixed时候距离屏幕top边的距离，不带单位的number
'right':0, //可选项，fixed时候距离屏幕right边的距离，不带单位的number,如果输入right选项，会忽略left值
'bottom':0, //可选项，fixed时候距离屏幕bottom边的距离，不带单位的number,如果输入bottom选项，会忽略top值
'zIndex':1 //可选项，fixed时候元素的层级，默认是1
},
opts=$.extend({}, defaults, option);
// 遍历插件对象，防止多个效果同步bug
return this.each(function(){
var iElew=$(this).width(),
iEleh=$(this).height(),
_this=$(this);
// 根据当前topbar元素，在其后面动态创建一个隐藏标签，防止fixed瞬间出现下面内容跳跃
$(this).after('<div class="copyEle" style="display:none;'+iElew+'px;height:'+iEleh+'px;"></div>');
var $copyEle=_this.next('.copyEle'),
iEleTop=$(this).offset().top;
$(window).on('scroll', function() {
var scrollT=$('html').scrollTop() || $('body').scrollTop();
if (iEleTop<scrollT) {
// 当元素距离网页顶部小于网页滚动距离时,显示吸顶效果
if (opts.right) {
if (opts.bottom) {
_this.css({
'position': 'fixed',
'right': opts.right,
'bottom': opts.bottom,
'zIndex': opts.zIndex
});
}else{
_this.css({
'position': 'fixed',
'right': opts.right,
'top': opts.top,
'zIndex': opts.zIndex
});
}
}else{
if (opts.bottom) {
_this.css({
'position': 'fixed',
'bottom': opts.bottom,
'left': opts.left,
'zIndex': opts.zIndex
});
}else{
_this.css({
'position': 'fixed',
'top': opts.top,
'left': opts.left,
'zIndex': opts.zIndex
});
}
}
$copyEle.css({
'display': 'block'
});
}else{
// 当元素距离网页顶部大于网页滚动距离时,隐藏吸顶效果
if (opts.right) {
if (opts.bottom) {
_this.css({
'position': '',
'right': '',
'bottom':''
});
}else{
_this.css({
'position': '',
'right': '',
'top':''
});
}
}else{
if (opts.bottom) {
_this.css({
'position': '',
'left': '',
'bottom':''
});
}else{
_this.css({
'position': '',
'left':'',
'top': ''
});
}
}
$copyEle.css({
'display': 'none'
});
}
});
});
}
});
})(window,jQuery);
案例html布局
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>较瘦 - 博客园</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
float: left;
}
.w100{
100px;
border: 1px solid #000;
margin: 0 40px;
}
.w200{
200px;
border: 1px solid #000;
margin: 0 40px;
}
.w300{
300px;
border: 1px solid #000;
margin: 0 40px;
}
.bar{
background: red;
display: block;
height: 50px;
}
</style>
<script src="./js/jquery-1.8.3.min.js"></script>
<script src="./js/jquery.topbar.js"></script>
</head>
<body>
<div class="w200">
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<div class="bar j-bar1">这是divbar</div>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
<div class="w100">
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<a class="bar j-bar2">这是abar</a>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
<div class="w300">
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<span class="bar j-bar3">这是spanbar</span>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
<p>文字</p>
</div>
</body>
<script>
$(function () {
$('.j-bar1').topbar({'left':'55rem'});
$('.j-bar2').topbar({'top':100});
$('.j-bar3').topbar({'right':100,'left':300});
});
</script>
</html>
插件使用方法
在页面中引入jquery和jquery.topbar.js文件(根据项目目录引入必要文件)。
<script src="./js/jquery-1.11.3.min.js"></script>
<script src="./js/jquery.topbar.js"></script>
HTML结构
没有特殊结构，可以获取到吸顶的元素即可。
初始化插件
在页面DOM元素加载完毕之后，通过topbar()方法来初始化该插件。
$(function(){
$('.j-bar1').topbar({'left':55});
$('.j-bar2').topbar({'top':100});
$('.j-bar3').topbar({'right':100,'left':300});
});
插件配置参数
left:fixed时候距离屏幕左边的距离，不带单位的number, 默认选项,默认值： 0top: fixed时候距离屏幕top边的距离，不带单位的number, 默认选项,默认值： 0right: 可选项，fixed时候距离屏幕right边的距离，不带单位的number,如果输入right选项，会忽略left值bottom: 可选项，fixed时候距离屏幕bottom边的距离，不带单位的number,如果输入bottom选项，会忽略top值zIndex: 可选项，fixed时候元素的层级，默认是1