粘滯標頭不滾動時保持寬度

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

（這是仿照是一樣的頭風格，它是ju寬度縮小以適應文本的寬度。我試圖修改標題風格，但它顯然是隻讀"'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

我的解決方案可以避免列寬變化：克隆標題。 （感謝@馬特爲線：$('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; 
}