Question

我有一些桌面标题，我计划在用户向下滚动页面时粘贴（固定），但是当粘贴被激活时它们会缩小，我希望它们继承标题的宽度，但是它们缩小了到目前为止的文字大小。我的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;
}

（这被建模为与标题样式相同，它只是宽度缩小以适应当前文本的宽度。我尝试编辑标题样式但它显然是只读的"'HeaderStyle' property is read-only and cannot be set."

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

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

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

滚动时粘滞标头不保持宽度

3 个答案: