我试图拥有一个非常长的表，其中绝对<thead>在滚动时保持固定在页眉的底部。由于表的长度，我不能使用固定的位置。当我使用位置固定时，它无法滚动。如何使用绝对定位并使用javascript / Jquery粘贴？
$(window).scroll(function() {
var sticky = $('#head');
var scroll = $(window).scrollTop();
var Lscroll = $(window).scrollLeft();
var table = $('#buget-table').width()
if (scroll >= 150){
alert('dd');
sticky.addClass('fixed');
} else {
sticky.removeClass('fixed');
}
});.fixed{
position: absolute;
z-index: 200;
top:93px;
background-color: white;
left:0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead id="head" >
<tr>
<th colspan="26">
<div>
<button class="btn" type="button" ng-click="vm.clearData()" tooltip="Delete existing data"><i class="fa fa-linux" /></button>
<button class="btn" type="button" st-reset-search><i class="fa fa-filter" /> Clear</button>
<button class="btn" type="button" ng-csv="vm.budgetState.displayed"><i class="fa fa-save" /> Export</button>
<i class="fa fa-exclamation-circle"
title="Some data has changed. Press save to save the changes to the server!"
ng-show="vm.budgetState.isDirty"></i>
<button class="btn" ng-click="vm.save()" ng-disabled="!vm.canSave()">Save</button>
<button class="btn" ng-click="vm.cancel(true)" ng-disabled="!vm.canSave()">Cancel</button>
</div>
</th>
</tr>
<tr>
<th></th>
<th class="budget-table-header" st-sort="uhT2Code"><abbr title="Scheme">UH T2</abbr></th>
<th class="budget-table-header" st-sort="schemeCode"><abbr title="Sun T2">Default Analysis</abbr></th>
<th class="budget-table-header" st-sort="estateCode"><abbr title="Analysis Code">Estate Code</abbr></th>
<th class="budget-table-header" st-sort="propertyRef">Prop Ref</th>
<th class="budget-table-header" st-sort="nominalCode">Nominal Code</th>
<th class="budget-table-header" st-sort="nominalDesc">Nominal Description</th>
<th class="budget-table-header" st-sort="amount">Amount</th>
<th class="budget-table-header" st-sort="date">Invoice Date</th>
<th class="budget-table-header" st-sort="reference">Invoice No</th>
<th class="budget-table-header" st-sort="description">Invoice Description</th>
<th class="budget-table-header" st-sort="supplierDesc">Supplier Name</th>
<th class="budget-table-header" st-sort="caseVisionRef"><abbr title="T9">Case Vision Ref</abbr></th>
<th class="budget-table-header" st-sort="worksOrderRef"><abbr title="T8">WO Ref</abbr></th>
<th class="budget-table-header" st-sort="periodDesc">Sun Period</th>
<th class="budget-table-header" st-sort="budgetHolder"><abbr title="T10">Budget Holder</abbr></th>
<th class="budget-table-header" st-sort="businessActivity"><abbr title="T1">Business Stream</abbr></th>
<th class="budget-table-header" st-sort="propType">Property Type</th>
<th class="budget-table-header" st-sort="housingOfficer"><abbr title="Property Manager / Housing Officer">PM/HO</abbr></th>
<th class="budget-table-header" st-sort="userName">SC Patch</th>
<th class="budget-table-header" st-sort="s20ViolationWarning"><abbr title="Flag set if an equal split would be higher than the configured S20 limit">S20 Warning</abbr></th>
<th class="budget-table-header" st-sort="s20BViolation">Previous Year</th>
<th class="budget-table-header" st-sort="isNewCost">New Cost</th>
<th class="budget-table-header" st-sort="statusString">Status</th>
<th class="budget-table-header" st-sort="lastNoteText">Latest Note</th>
<th></th>
<!--<th st-sort="tenure" ng-show="false">Tenure</th>-->
</tr>
<tr>
<th></th>
<th><input st-search="uhT2Code" class="input-sm form-control budget-table-t2code" type="search" /></th>
<th><input st-search="schemeCode" class="input-sm form-control" type="search" /></th>
<th><input st-search="estateCode" class="input-sm form-control budget-table-estatecode" type="search" /></th>
<th><input st-search="propertyRef" class="input-sm form-control budget-table-propertyRef" type="search" /></th>
<th><input st-search="nominalCode" class="input-sm form-control budget-table-nomcode" type="search" /></th>
<th><input st-search="nominalDesc" class="input-sm form-control budget-table-nomdesc" type="search" /></th>
<th><input st-search="amount" class="input-sm form-control budget-table-amount" type="search" /></th>
<th><st-date-range predicate="date" before="query.before" after="query.after" /></th>
<th><input st-search="reference" class="input-sm form-control budget-table-reference" type="search" /></th>
<th><input st-search="description" class="input-sm form-control budget-table-description" type="search" /></th>
<th><input st-search="supplierDesc" class="input-sm form-control" type="search" /></th>
<th><input st-search="caseVisionRef" class="input-sm form-control budget-table-casevisionref" type="search" /></th>
<th><input st-search="worksOrderRef" class="input-sm form-control" type="search" /></th>
<th><input st-search="periodDesc" class="input-sm form-control budget-table-sunperioddesc" type="search" /></th>
<th><input st-search="budgetHolder" class="input-sm form-control budget-table-budgetholder" type="search" /></th>
<th><input st-search="businessActivity" class="input-sm form-control" type="search" /></th>
<th><input st-search="propType" class="input-sm form-control" type="search" /></th>
<th><input st-search="housingOfficer" class="input-sm form-control budget-table-housingofficer" type="search" /></th>
<th><input st-search="userName" class="input-sm form-control budget-table-username " type="search" /></th>
<th><st-select-distinct style-class="input-sm form-control" collection="vm.budgetState.actualTransactions" predicate="s20ViolationWarning" /></th>
<th><st-select-distinct style-class="input-sm form-control" collection="vm.budgetState.actualTransactions" predicate="s20BViolation" /></th>
<th><st-select-distinct style-class="input-sm form-control" collection="vm.budgetState.actualTransactions" predicate="isNewCost" /></th>
<th><input st-search="statusString" class="input-sm form-control" type="search" /></th>
<th><input st-search="lastNoteText" class="input-sm form-control latestNote" type="search" /></th>
<th><input class="input-sm form-control latestNote" type="search" disabled /></th>
<!--<th ng-show="false"><input st-search="tenure" class="input-sm form-control budget-table-tenure" type="search" /></th>-->
</tr>
</thead>
</table>