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

2024-03-29 11:54•python•阅读 2086

更多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" +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{
    width: 100px;
    border: 1px solid #000;
    margin: 0 40px;
  }
  .w200{
    width: 200px;
    border: 1px solid #000;
    margin: 0 40px;
  }
  .w300{
    width: 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

上一篇 »jQuery插件css3动画模拟confirm弹窗
下一篇 »css3自定义流动条

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

效果插件源码

案例html布局

插件使用方法

HTML结构

初始化插件

插件配置参数

相关推荐

【CSS3】自定义滚动条样式 -webkit-scrollbar

CSS3自定义滚动条样式 -webkit-scrollbar

CSS3自定义滚动条样式 -webkit-scrollbar

javascript封装自定义滚动条方法，可自定义四个边框滚动条

React-Native解决ListView 在Android手机上无吸顶效果

Bootstrap导航点击菜单跳转与点击缩放菜单折叠按钮缓冲效果插件jquery.singlePageNav.min.js

Jquery jcarousellite 参数说明

JQuery 插件FlexiGrid 之完全配置与使用