滚动时粘性标题不保持宽度答案

【问题标题】：Sticky headers not maintaining width when scrolling滚动时粘性标题不保持宽度
【发布时间】：2018-05-17 13:59:41
【问题描述】：

我有一些表格标题，我计划在用户向下滚动页面时将它们设置为粘性（固定），但它们当前在激活粘性时会缩小，我希望它们继承标题的宽度，但它们会缩小到目前文本的大小。我的 JS：

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

SOLUTION:

 $(".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;
}

(这个模型和header样式一样，只是宽度缩小到现在适合文本的宽度。我试图编辑header样式，但它显然是只读的"'HeaderStyle' property is read-only and cannot be set."

【问题讨论】：

我们不想要您的 ASP，我们想要您生成的 HTML 标记...这是前端的东西我的朋友。
无论如何我相信这是不可能的。我试过一次。我建议您在页面顶部滚动时创建一个绝对定位元素。
嗨，Alvaro，我现在已经用 HTML 替换了 .aspx，我认为这很难做到，但并不认为这是不可能的！
好吧，正如我所说，我会做一个绝对定位的元素，而不是试图打破表格。您尝试应用的固定位置将断开与表格的任何连接，因此您需要应用样式以适应表格结构，这就像...创建我建议的元素。

标签： javascript jquery html css

【解决方案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();  
    });  
});

【讨论】：

嗨，马特，感谢您的回答，它现在填满了页面，但仍然与我的专栏不匹配。我也没有提到我的标题水平溢出，因此理想情况下，标题在水平滚动时不会被固定，只有垂直
嗨，马特，我已经编辑了原始问题以包含解决方案，我没有提到我的 th 尺寸不同，所以我在您的解决方案中添加了一行，谢谢
点赞！我在这里有同样的问题，我的标题也将垂直固定但不是水平固定，任何建议

【解决方案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
  }
});

【讨论】：

普通是什么意思？有没有这个的github repo？
@Danger14 这里是：github.com/shaogbi/FrontEnd/blob/master/jQuery/auto-header.js

【解决方案3】：

我避免列宽更改的解决方案：克隆标题。（感谢@Matt 的电话：$('th').width($('th').width()); 和他的解决方案。）

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;
}

【讨论】：