Home > Web Front-end > JS Tutorial > body text

Fixed table header makes the form scroll horizontally

php中世界最好的语言
Release: 2018-04-16 16:56:18
Original
2205 people have browsed it

This time I will bring you the fixed table header to make the form scroll horizontally, and the fixed table header to make the form scroll horizontally. 1. The header is wrapped with a table and wrapped with p, and the specific content of

table

is wrapped with a table 2. Use positon: relative to position the p outside the head

3. Get the height of the entire table

4. Get the distance between the DOM of the table (or the DOM wrapping the table) and the top of the page offsetTop

5. The distance between the zero point of scrolling, the height of the table, and the distance between the table and the top of the page. If the scroll exceeds this, the top value of the head will be returned to 0 or left unchanged. Of course, there are many areas that can be optimized. Just showing a little idea hehehe

Off topic, why do you use red meter? Because it is conspicuous. Haha

JS Code

/**
     * 最重要的一点是头和身体是两个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')
              }
            }
          })
        }
      }
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website! Recommended reading:

Bootstrap drop-down plug-in dropdown usage tips

Detailed explanation of tofixed and round usage in JS

AngularJS makes input box character limit reminder

The above is the detailed content of Fixed table header makes the form scroll horizontally. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!