php表滑动其它固定,table固定表头使表单横向滚动

这次给大家带来table固定表头使表单横向滚动，table固定表头使表单横向滚动的注意事项有哪些，下面就是实战案例，一起来看一下。

1、头部用一个table并用一个p包裹着，表格的具体内容用一个table

2、头部外面的p用positon: relative相对定位

3、获取整个表格的高度

4、获取表格的dom(或者包裹着表格的dom)距离页面顶部的距离 offsetTop

5、滚动的零界点的距离表格的高度+表格距离页面顶部的距离如果滚动超过这个就让头部的top值归0或原封不动

当然还有很多可以优化的地方我只是展示一个小思路嘿嘿嘿

题外话为啥用红色表头因为显眼哇哈哈

JS代码/**

* 最重要的一点是头和身体是两个table 然后定位用relative 然后通过滚动来计算

* */

function FixedHead (){

if( !(this instanceof FixedHead) ){

return new FixedHead()

};

this.$dom = $('.dataTables_scrollHead'); // 表头外层dom

this.offsetTop = this.$dom.offset().top; // 表头外层dom距离顶部的高度

this.parents = this.$dom.parents('.dataTables_scroll'); // 表头外层dom最外面的盒子(包裹着table的盒子)

this.outBoxHeight = this.parents.height(); // 表头外层dom最外面的盒子(包裹着table的盒子)的高度

this.maxHeight = this.offsetTop + this.outBoxHeight; // 滚动的零界点最多能滚动到哪里

this.scroll();

}

FixedHead.prototype = {

constructor: FixedHead,

scroll: function(){

var that = this;

$(window).scroll(function(){

var scrollTop = $(this).scrollTop();

if((scrollTop > that.offsetTop) && (scrollTop < that.maxHeight)){

that.$dom.css('top', (scrollTop - that.offsetTop + 50)+'px') // 这个50是因为我的头部导航固定在顶部高是50 所以要加上

}else {

var topCss = that.$dom.css('top');

if(topCss === '0px' || topCss === 'auto'){

}else {

that.$dom.css('top', '0px')

}

})

}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

php表滑动其它固定,table固定表头使表单横向滚动相关推荐

html表格类似excel固定表头样式,(转)supertable像excel那样固定table的表头和第一列...
像excel那样固定table的表头和第一列 .left,.right{float: left;height: 297px;background-color: #ccc;} #left_topic{h ...
mysql附录建表_用CREATE TABLE 语句创建数据表
用CREATE TABLE 语句创建数据表用 CREATE TABLE 语句创建表.此语句的完整语法是相当复杂的,因为存在那么多的可选子句,但在实际中此语句的应用相当简单.如我们在第 1 章中使用的 ...
bootstrap中固定table的表头
前端时间鼓捣的一个简单的手机网站,今天又拿出来弄一弄因为主要是给手机访问,用的是bootstrap响应式布局,今天的任务是做一个数据展示页面但是由于数据的列比较多,所以横向显示不下,为了较好的显示 ...
mysql2012更改表名_sql alter table修改数据库的表名字
SQL基础语句总结前言: SQL 是用于访问和处理数据库的标准的计算机语言. 什么是 SQL? SQL 指结构化查询语言SQL 使我们有能力访问数据库SQL 是一种 ANSI 的标准计算机语言编者注 ...
不同表结构数据迁移_C语言：数据结构-广义表的存储结构
广义表相对于线性表﹑数组﹑串等线性结构是较为复杂的结构,其元素可以具有不同的结构(可以是原子,也可以是列表),通常采用链式结构存储广义表. (1)表头.表尾链式存储链式结构中用结点储存列表中的数据元 ...
oracle表分区四种方式的含义,Oracle表分区详细说明
Oracle表分区自从oracle8i 开始可以把一个表分割为多个小的部分,这样可以对oracle的性能优化带来很大的好处~ 例如:改善表的查询性能,更加容易管理表数据,备份和恢复操作更方便在or ...
element table固定表头，表的高度自适应解决方法
element table固定表头,表的高度自适应解决方法参考文章: (1)element table固定表头,表的高度自适应解决方法 (2)https://www.cnblogs.com/muou ...
antd 设置表头属性_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
一.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本之前都存在,反正3.16.2版本是存在这个问题的,如果是3.24.0之前的版本估计只能通过修改css样式解决. 按照官网说的: 1 ...
antd table动态表头_解决react使用antd table组件固定表头后，表头和表体列不对齐以及配置fixed固定左右侧后行高度不对齐...
1.固定表头后表体列和表头不对齐此问题可能在antd3.24.0版本以前都存在,反正3.16.2版本是存在这个问题的,若是是3.24.0以前的版本估计只能经过修改css样式解决.css 按照官网说的 ...

php表滑动其它固定,table固定表头使表单横向滚动

php表滑动其它固定,table固定表头使表单横向滚动相关推荐

最新文章

热门文章

php表滑动 其它固定,table固定表头使表单横向滚动

php表滑动 其它固定,table固定表头使表单横向滚动相关推荐

最新文章

热门文章

php表滑动其它固定,table固定表头使表单横向滚动

php表滑动其它固定,table固定表头使表单横向滚动相关推荐