欢迎光临
我们一直在努力

eleFixed.js实现ecshop产品列表页面表头悬浮-其它模版程序通用 eleFixed.js实例

方法非常的简单,先打开\admin\templates\good_list.htm商品列表模版:

大约23行:

<table cellpadding="3" cellspacing="1">
  <tr>
      此处代码省略
  </tr>
</table>

修改成:

<table cellpadding="3" cellspacing="1">
  <thead>
      <tr>
          此处代码省略
      </tr>
  </thead>
</table>

然后将代码拉到最末,添加如下js代码:

<script>
!function(){function b(a){return"object"==typeof HTMLElement?a instanceof HTMLElement:a&&"object"==typeof a&&null!==a&&1===a.nodeType&&"string"==typeof a.nodeName}var a={targets:[],push:null,distory:null,handler:null,"delete":null};a.push=function(a){return"object"!=typeof a?console.error("eleFixed: push param must be a Object"):a.target||b(a.target)?a.offsetTop||"number"==typeof a.offsetTop?(window.eleFixed.targets.push(a),void 0):console.error("eleFixed: param's offsetTop must be a Number"):console.error("eleFixed: target must be a HTMLElement")},a.handler=function(){var c,b=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;for(c in a.targets)a.targets[c].target.style.transform=b>a.targets[c].offsetTop?"translateY("+(b-a.targets[c].offsetTop)+"px)":"translateY(0px)"},a.delete=function(a){var c,d;if(a&&b(a)){c=window.eleFixed.targets;for(d in c)if(a.isEqualNode(c[d].target)){a.style.transform="translateY(0px)",c.splice(d,1);break}}},a.distory=function(){window.removeEventListener("scroll",a.handler);for(var b in window.eleFixed.targets)window.eleFixed.targets[b].target.style.transform="translateY(0px)";window.eleFixed=null},"object"==typeof exports?module.exports=a:"function"==typeof define&&define.amd?define(function(){return a}):this.eleFixed=a,window.addEventListener("scroll",a.handler)}();
</script>
<script>
    // add an instance
    eleFixed.push({
        target: document.getElementsByTagName('thead')[0], // it must be a HTMLElement
        offsetTop: 124 // height from window offsetTop
    })
    
    // delete one instance
    // eleFixed.delete(document.getElementsByTagName('thead')[0])
    
    // distory eleFixed
    // eleFixed.distory()
</script>

 

介绍

eleFixed是一款非常简单的使用动画来固定元素的插件(最常见的作用就是固定table的thead)

它可以同时固定多个HTMLElement而不用额外监听多个事件,而且你也可以随时删除某一个监听对象或者直接把eleFixed从你的网页中移除

使用

当你引入eleFixed.js的时候,它就已经帮你在全局定义好了eleFixed对象并监听scroll事件(仅仅一个);

以下为全局eleFixed对象的描述:
eleFixed对象 描述
targets Array,用来存放多个需要固定的target对象,target对象格式见下表
push Function,接受一个target对象并推送元素到targets数组中
delete Function,从targets中删除指定的HTMLElement,只需要传入需要删除的HTMLElement对象
distory Function,移除eleFixed的监听事件、并删除eleFixed对象
eleFixed.push需要传入的对象(targrt)描述:
target对象 描述
target HTMLElement,接收你想固定的元素,比如 document.getElementsByTagName(‘thead’)[0]
offsetTop Number,此元素距离顶部多少像素时开始固定在顶部, 比如 200 (无需单位)
插入target:
    <table class="table">
        <thead>
            <!-- some titles here -->
        </thead>
        <tbody>
            <!-- some elements here -->
        </tbody>
    </table>
    <script src="./eleFixed.min.js"></script>
    <script>
        // add an instance
        eleFixed.push({
            target: document.getElementsByTagName('thead')[0], // it must be a HTMLElement
            offsetTop: 210 // height from window offsetTop
        })
    </script>
未经允许不得转载:第五博客 » eleFixed.js实现ecshop产品列表页面表头悬浮-其它模版程序通用
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

更专业 更方便

联系我们