滚动时固定头部无法保持宽度

Question

我有一些表头，计划在用户向下滚动页面时使它们固定，但当前它们会在激活固定时缩小，我希望它们继承表头的宽度，而不是当前文本的大小。

我的JS：

$(document).ready(function() {  
var stickyNavTop = $('.th').offset().top;

解决方案：

 $(".th th").each(function(){$(this).width($(this).width());});
 $('.th').width($('.th').width());

var stickyNav = function(){  
var scrollTop = $(window).scrollTop();  

if (scrollTop > stickyNavTop) {   
    $('.th').addClass('sticky');  
} else {  
    $('.th').removeClass('sticky');   
}  
};  

stickyNav();  

$(window).scroll(function() {  
    stickyNav();  
});  
});  

我的HTML：

<table class="mGrid" cellspacing="0" rules="all" border="1" id="1"
style="width:98%;border-collapse:collapse;">
  <tr class="th">
    <th scope="col">Membership No.</th>
    <th scope="col">Surname</th>
    <th scope="col">Other Name(s)</th>
  </tr>
  <tr>
    <td>
      <div id="2" class="formInput">
        <label for="2">Membership No.</label>
        <input name="2" type="text" value="AH6973" id="2"
        class="required" style="width:60px;" />
      </div>
    </td>
    <td>
      <div id="3" class="formInput">
        <label for="3">Surname</label>
        <input name="3" type="text" value="CARTER" id="3"
        style="width:100px;" />
      </div>
    </td>
    <td>
      <div id="4" class="formInput">
        <label for="4">Other Name(s)</label>
        <input name="4" type="text" value="RAYMOND" id="4"
        style="width:150px;" />
      </div>
    </td>
  </tr>
</table>

我的CSS:

.sticky {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 100;
    border-top: 0;
    color: #fff !important;
    background: #666;
    border-left: solid 1px #525252;
    font-size: 1.0em;
}

这被建模为与标题样式相同，只是宽度会根据文字宽度缩小。我试图编辑标题样式，但显然是只读的 "'HeaderStyle' 属性是只读的，无法设置。"

- Ed Harrod

---

我们不需要你的ASP，我们需要你生成的HTML标记...这是前端的东西，我的朋友。 - Alvaro

无论如何，我认为那是不可能的。我曾经试过。我建议你在页面滚动到顶部时创建一个绝对定位的元素。 - Alvaro

嗨，阿尔瓦罗，我现在用HTML替换了.aspx文件，这个任务我想可能会很难，但是实际上并没有觉得不可能！ - Ed Harrod

好的，正如我所说，我会使用绝对定位元素来代替尝试打破表格。您尝试应用的固定位置将会打破与表格的任何连接，因此您需要应用样式来适应表格结构，就像创建我建议的元素一样。 - Alvaro

Answer 1

在函数定义之前添加以下代码：

$('th').width($('th').width());

完整的 JavaScript 代码：

$(document).ready(function() {  
    var stickyNavTop = $('.th').offset().top;  

    $('th').width($('th').width());

    var stickyNav = function(){  
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {   
            $('.th').addClass('sticky');  
        } else {  
            $('.th').removeClass('sticky');   
        }  
    };  

    stickyNav();  

    $(window).scroll(function() {  
        stickyNav();  
    });  
});

- Matt

---

嗨，马特，谢谢你的回答，现在页面填充更多了，但仍然与我的列不匹配。 我还没有提到我的标题水平溢出，因此理想情况下，在水平滚动时标题不应固定，只能垂直滚动。 - Ed Harrod

嗨，马特，我已经编辑了原来的问题，现在包括解决方案了。我没有提到我的th的大小不同，所以我向你的解决方案添加了额外的一行。谢谢。 - Ed Harrod

点赞！我这里也有同样的问题，我的表头垂直固定但水平不固定，有什么建议吗？ - PirateApp

Answer 2

这里有一个常用的解决方案，它会自动检测每个子元素的宽度和高度，并在滚动时进行反射，类似于以下内容：

var $this = $(this),
      top = $this.offset().top,
      left = $this.offset().left,
      width = $this.width(),
      height = $this.height(),
      widthArr = [],
      heightArr = [];
    $this.find("*").each(function(i, e) {
      widthArr.push($(this).width());
      heightArr.push($(this).height());
    });

$(window).scroll(function() {
  if($(window).scrollTop() >= top) {
    $this.css({
      position: "fixed",
      top: 0,
      left: left,
      "z-index": 100,
      width: width,
      height: height
    });

    $this.find("*").each(function(i, e) {
      $(this).width(widthArr[i]);
      $(this).height(heightArr[i]);
    });
  } else {
      // to be implemented
  }
});

- coderz

---

“Common” 是什么意思？这个有对应的 Github 仓库吗？ - Danger14

@Danger14 这是链接：https://github.com/shaogbi/FrontEnd/blob/master/jQuery/auto-header.js - coderz

Answer 3

我的解决方案避免列宽变化：克隆标题行。（感谢@Matt提供的代码：$('th').width($('th').width());和他的解决方案。）

JS

var stickyNavTop = jQuery('thead tr:first-child').offset().top;

// init state
var stickState = (jQuery(window).scrollTop() > stickyNavTop);

var stickyNav = function() {
    var scrollTop = jQuery(window).scrollTop();

    // state has changed?
    if (stickState != (scrollTop > stickyNavTop)) {

        // remember/catch new state
        stickState = (scrollTop > stickyNavTop);

        if (stickState) {  
            jQuery('thead tr:first-child th').each(
                function() { jQuery(this).width( jQuery(this).width() ); }
            );

            // cloning the header : the original columns won't move
            jQuery('thead tr:first-child')
                .clone()
                .prependTo(jQuery('thead'))
                .addClass('sticky');

        } else {  
            jQuery('tr.sticky').remove();
        }  

    }
};  

jQuery(window).scroll(function() { 
    stickyNav();  
});  

stickyNav();

CSS

.sticky {
    position: fixed;
    top: 0;
    z-index: 100;
}

- Eric Lavoie