jQuery自定义插件之吸顶条效果

更多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, 默认选项,默认值： 0
top : fixed时候距离屏幕top边的距离，不带单位的number, 默认选项,默认值： 0
right : 可选项，fixed时候距离屏幕right边的距离，不带单位的number,如果输入right选项，会忽略left值
bottom : 可选项，fixed时候距离屏幕bottom边的距离，不带单位的number,如果输入bottom选项，会忽略top值
zIndex : 可选项，fixed时候元素的层级，默认是1

相关阅读:
程序员修炼之道阅读笔记2
程序员修炼之道阅读笔记1
软件体系架构的质量属性
 计算贴现率相关问题
 以《淘宝网》为例，描绘质量属性的六个常见属性场景
 第十四周总结
 软件需求模式阅读笔记
 第十三周总结
 第十二周总结
 重大技术需求进度报告六
原文地址：https://www.cnblogs.com/jiaoshou/p/13266554.html

热门文章
9月22日
 9月17日
 9月11日
 Hbase和zookeeper完全分布式的配置
 8月27日
 8月26日
 8月23日
 8月21日
 8月20日
 8月19日 hive的再配置