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('');
var $copyEle=_this.next('.copyEle'),
iEleTop=$(this).offset().top;
$(window).on('scroll', function() {
var scrollT=$('html').scrollTop() || $('body').scrollTop();
if (iEleTop案例html布局
较瘦 - 博客园
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
这是abar
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
文字
插件使用方法
在页面中引入jquery和jquery.topbar.js文件(根据项目目录引入必要文件)。
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