PDA

View Full Version : سوال: فیکس کردن یک دایو در بالای صفحه بعد از اسکرول



IMANAZADI
جمعه 18 مهر 1393, 06:10 صبح
با سلام
یک صفحه دارم که شامل 3 عدد تکس باکس هست که این سه عدد تکس باکس تشکیل یک سطر رو میدن
هر سطر به تعداد زیاد در صفحه هست بگونه ای که صفحه اسکرول میخوره
حالا یک مشکلی هست
سطر اول بصورت هدر استفاده میشه
میخوام زمانیکه صفحه به پایین اسکرول میشه هدر در جای خودش فیکس بشه
خودم یه کد نوشتم ولی درست جواب نمیده

عکس قبل از اسکرول

124394

عکس بعد از اسکرول

124395

کد کل صفحه رو میزارم اگر کسی میدونه لطفا بگه مشکل کد کجاست



<!doctype html>


<html>
<head>
<meta charset="utf-8">
<title>
Untitled Document
</title>
<style type="text/css">

.tbl
{
display: table;
}


.row
{
display: table-row;
}


.col
{
display: table-cell;
text-align: center;
}


.col>*
{
border-radius: 3px;
border: solid 1px #999;
background-color: transparent;
margin-left: 5px;
margin-bottom: 2px;
}


.sheet
{
width: 40px;
height: 18px;
}


.txt
{
width: 290px;
height: 18px;
}


.note
{
width: 140px;
height: 18px;
}


.sticky
{
position: fixed;
top: 0px;
background-color: #0CC;
height: 25px;
}
</style>
</head>


<body>


<div id="tes">
</div>
<div id="test">
<div id="tbl">
<div id="rowheader" class="row sticky">
<div class="col">
Sheet
</div>
<div class="col">
Typetxt
</div>
<div class="col">
Note
</div>
</div>
<div id="divrow1" class="row">
<div id="divsht1" class="col">
<input id="sheet1" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup1" class="col">
<input id="typetxt1" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote1" class="col">
<input id="note1" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow2" class="row">
<div id="divsht2" class="col">
<input id="sheet2" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup2" class="col">
<input id="typetxt2" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote2" class="col">
<input id="note2" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow3" class="row">
<div id="divsht3" class="col">
<input id="sheet3" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup3" class="col">
<input id="typetxt3" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote3" class="col">
<input id="note3" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow4" class="row">
<div id="divsht4" class="col">
<input id="sheet4" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup4" class="col">
<input id="typetxt4" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote4" class="col">
<input id="note4" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow5" class="row">
<div id="divsht5" class="col">
<input id="sheet5" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup5" class="col">
<input id="typetxt5" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote5" class="col">
<input id="note5" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow6" class="row">
<div id="divsht6" class="col">
<input id="sheet6" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup6" class="col">
<input id="typetxt6" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote6" class="col">
<input id="note6" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow7" class="row">
<div id="divsht7" class="col">
<input id="sheet7" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup7" class="col">
<input id="typetxt7" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote7" class="col">
<input id="note7" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow8" class="row">
<div id="divsht8" class="col">
<input id="sheet8" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup8" class="col">
<input id="typetxt8" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote8" class="col">
<input id="note8" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow9" class="row">
<div id="divsht9" class="col">
<input id="sheet9" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup9" class="col">
<input id="typetxt9" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote9" class="col">
<input id="note9" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow10" class="row">
<div id="divsht10" class="col">
<input id="sheet10" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup10" class="col">
<input id="typetxt10" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote10" class="col">
<input id="note10" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow11" class="row">
<div id="divsht11" class="col">
<input id="sheet11" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup11" class="col">
<input id="typetxt11" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote11" class="col">
<input id="note11" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow12" class="row">
<div id="divsht12" class="col">
<input id="sheet12" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup12" class="col">
<input id="typetxt12" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote12" class="col">
<input id="note12" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow13" class="row">
<div id="divsht13" class="col">
<input id="sheet13" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup13" class="col">
<input id="typetxt13" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote13" class="col">
<input id="note13" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow14" class="row">
<div id="divsht14" class="col">
<input id="sheet14" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup14" class="col">
<input id="typetxt14" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote14" class="col">
<input id="note14" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow15" class="row">
<div id="divsht15" class="col">
<input id="sheet15" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup15" class="col">
<input id="typetxt15" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote15" class="col">
<input id="note15" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow16" class="row">
<div id="divsht16" class="col">
<input id="sheet16" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup16" class="col">
<input id="typetxt16" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote16" class="col">
<input id="note16" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow17" class="row">
<div id="divsht17" class="col">
<input id="sheet17" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup17" class="col">
<input id="typetxt17" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote17" class="col">
<input id="note17" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow18" class="row">
<div id="divsht18" class="col">
<input id="sheet18" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup18" class="col">
<input id="typetxt18" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote18" class="col">
<input id="note18" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow19" class="row">
<div id="divsht19" class="col">
<input id="sheet19" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup19" class="col">
<input id="typetxt19" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote19" class="col">
<input id="note19" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow20" class="row">
<div id="divsht20" class="col">
<input id="sheet20" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup20" class="col">
<input id="typetxt20" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote20" class="col">
<input id="note20" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow21" class="row">
<div id="divsht21" class="col">
<input id="sheet21" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup21" class="col">
<input id="typetxt21" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote21" class="col">
<input id="note21" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow22" class="row">
<div id="divsht22" class="col">
<input id="sheet22" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup22" class="col">
<input id="typetxt22" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote22" class="col">
<input id="note22" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow23" class="row">
<div id="divsht23" class="col">
<input id="sheet23" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup23" class="col">
<input id="typetxt23" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote23" class="col">
<input id="note23" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow24" class="row">
<div id="divsht24" class="col">
<input id="sheet24" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup24" class="col">
<input id="typetxt24" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote24" class="col">
<input id="note24" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow25" class="row">
<div id="divsht25" class="col">
<input id="sheet25" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup25" class="col">
<input id="typetxt25" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote25" class="col">
<input id="note25" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow26" class="row">
<div id="divsht26" class="col">
<input id="sheet26" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup26" class="col">
<input id="typetxt26" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote26" class="col">
<input id="note26" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow27" class="row">
<div id="divsht27" class="col">
<input id="sheet27" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup27" class="col">
<input id="typetxt27" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote27" class="col">
<input id="note27" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow28" class="row">
<div id="divsht28" class="col">
<input id="sheet28" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup28" class="col">
<input id="typetxt28" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote28" class="col">
<input id="note28" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow29" class="row">
<div id="divsht29" class="col">
<input id="sheet29" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup29" class="col">
<input id="typetxt29" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote29" class="col">
<input id="note29" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow30" class="row">
<div id="divsht30" class="col">
<input id="sheet30" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup30" class="col">
<input id="typetxt30" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote30" class="col">
<input id="note30" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow31" class="row">
<div id="divsht31" class="col">
<input id="sheet31" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup31" class="col">
<input id="typetxt31" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote31" class="col">
<input id="note31" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow32" class="row">
<div id="divsht32" class="col">
<input id="sheet32" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup32" class="col">
<input id="typetxt32" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote32" class="col">
<input id="note32" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow33" class="row">
<div id="divsht33" class="col">
<input id="sheet33" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup33" class="col">
<input id="typetxt33" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote33" class="col">
<input id="note33" name="note[]" type="text" class="note">
</div>
</div>
</div>
</div>
<script type="text/javascript">


window.onscroll=function(){
var x=document.getElementById('rowheader');

if(window.pageYOffset>x.offsetTop)
{
x.classList.add('sticky');
}
if(window.pageYOffset<=x.offsetTop)
{
x.classList.remove('sticky');

}
}




</script>
</body>
</html>

MRmoon
جمعه 18 مهر 1393, 06:54 صبح
درود.

خاصیت position: fixed رو که براش تنظیم کردی بردار درست می شه، طبیعتا.

​محمد.

IMANAZADI
جمعه 18 مهر 1393, 07:00 صبح
دوست عزیز درست نمیشه
بواسطه همین fixed هست که دایو به بالای صفحه میچسبه و موقعیتش تغییر نمیکنه

IMANAZADI
شنبه 19 مهر 1393, 05:28 صبح
یعنی اینقدر سوالم سخت و پیچیده بود

IMANAZADI
شنبه 19 مهر 1393, 17:16 عصر
:گریه::گریه::گریه::گریه::گریه: :گریه::گریه::گریه::گریه::گریه: :گریه::گریه::گریه::گریه::گریه: :گریه:

pich2mohre
شنبه 19 مهر 1393, 17:33 عصر
سلام دوست عزیز
مشکل اینه که زمانیکه position را fix می کنید left و top صفر میشود. شما باید برای col های داخل rowheader مقدار left و width را مشخص کنید. کد زیر این کار را برایتان انجام می دهد.
موفق باشید




window.onscroll=function(){
var x=document.getElementById('rowheader');

var headerCols = x.children;


if(window.pageYOffset>x.offsetTop)
{
for (var i = 0; i < headerCols.length; i++) {
var col = headerCols[i];
var left = col.offsetLeft;
var width = col.offsetWidth;
col.style.left = left + 'px';
col.style.width = width + 'px';
}
for (var i = 0; i < headerCols.length; i++) {
var col = headerCols[i];
col.classList.add('sticky');
}
}
if (window.pageYOffset <= x.offsetTop) {


for (var i = 0; i < headerCols.length; i++) {


var col = headerCols[i];
col.classList.remove('sticky');
}
}
}

IMANAZADI
یک شنبه 20 مهر 1393, 05:42 صبح
دوست گرامی ممنون از پاسخت
ولی کد شما رو که جایگزین کردم جواب نداد

Saeed.MD
یک شنبه 20 مهر 1393, 21:51 عصر
:گیج:

<!doctype html>


<html>
<head>
<meta charset="utf-8">
<title>
Untitled Document
</title>
<style type="text/css">

.tbl
{
display: table;
}


.row
{
display: table-row;
}

.col
{
display: table-cell;
text-align: center;
}

.col>*
{
border-radius: 3px;
border: solid 1px #999;
background-color: transparent;
margin-left: 5px;
margin-bottom: 2px;
}

.sheet
{
width: 40px;
height: 18px;
}

.txt
{
width: 290px;
height: 18px;
}

.note
{
width: 140px;
height: 18px;
}

.sticky
{
position: fixed;
top: 0px;
background-color: #0CC;
height: 25px;
}
</style>
</head>


<body>


<div id="tes">
</div>
<div id="test">
<div id="tbl">
<div id="rowheader" class="row">
<div class="col">
Sheet
</div>
<div class="col">
Typetxt
</div>
<div class="col">
Note
</div>
</div>
<div id="divrow1" class="row">
<div id="divsht1" class="col">
<input id="sheet1" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup1" class="col">
<input id="typetxt1" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote1" class="col">
<input id="note1" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow2" class="row">
<div id="divsht2" class="col">
<input id="sheet2" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup2" class="col">
<input id="typetxt2" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote2" class="col">
<input id="note2" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow3" class="row">
<div id="divsht3" class="col">
<input id="sheet3" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup3" class="col">
<input id="typetxt3" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote3" class="col">
<input id="note3" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow4" class="row">
<div id="divsht4" class="col">
<input id="sheet4" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup4" class="col">
<input id="typetxt4" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote4" class="col">
<input id="note4" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow5" class="row">
<div id="divsht5" class="col">
<input id="sheet5" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup5" class="col">
<input id="typetxt5" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote5" class="col">
<input id="note5" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow6" class="row">
<div id="divsht6" class="col">
<input id="sheet6" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup6" class="col">
<input id="typetxt6" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote6" class="col">
<input id="note6" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow7" class="row">
<div id="divsht7" class="col">
<input id="sheet7" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup7" class="col">
<input id="typetxt7" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote7" class="col">
<input id="note7" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow8" class="row">
<div id="divsht8" class="col">
<input id="sheet8" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup8" class="col">
<input id="typetxt8" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote8" class="col">
<input id="note8" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow9" class="row">
<div id="divsht9" class="col">
<input id="sheet9" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup9" class="col">
<input id="typetxt9" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote9" class="col">
<input id="note9" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow10" class="row">
<div id="divsht10" class="col">
<input id="sheet10" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup10" class="col">
<input id="typetxt10" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote10" class="col">
<input id="note10" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow11" class="row">
<div id="divsht11" class="col">
<input id="sheet11" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup11" class="col">
<input id="typetxt11" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote11" class="col">
<input id="note11" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow12" class="row">
<div id="divsht12" class="col">
<input id="sheet12" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup12" class="col">
<input id="typetxt12" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote12" class="col">
<input id="note12" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow13" class="row">
<div id="divsht13" class="col">
<input id="sheet13" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup13" class="col">
<input id="typetxt13" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote13" class="col">
<input id="note13" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow14" class="row">
<div id="divsht14" class="col">
<input id="sheet14" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup14" class="col">
<input id="typetxt14" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote14" class="col">
<input id="note14" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow15" class="row">
<div id="divsht15" class="col">
<input id="sheet15" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup15" class="col">
<input id="typetxt15" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote15" class="col">
<input id="note15" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow16" class="row">
<div id="divsht16" class="col">
<input id="sheet16" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup16" class="col">
<input id="typetxt16" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote16" class="col">
<input id="note16" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow17" class="row">
<div id="divsht17" class="col">
<input id="sheet17" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup17" class="col">
<input id="typetxt17" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote17" class="col">
<input id="note17" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow18" class="row">
<div id="divsht18" class="col">
<input id="sheet18" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup18" class="col">
<input id="typetxt18" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote18" class="col">
<input id="note18" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow19" class="row">
<div id="divsht19" class="col">
<input id="sheet19" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup19" class="col">
<input id="typetxt19" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote19" class="col">
<input id="note19" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow20" class="row">
<div id="divsht20" class="col">
<input id="sheet20" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup20" class="col">
<input id="typetxt20" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote20" class="col">
<input id="note20" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow21" class="row">
<div id="divsht21" class="col">
<input id="sheet21" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup21" class="col">
<input id="typetxt21" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote21" class="col">
<input id="note21" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow22" class="row">
<div id="divsht22" class="col">
<input id="sheet22" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup22" class="col">
<input id="typetxt22" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote22" class="col">
<input id="note22" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow23" class="row">
<div id="divsht23" class="col">
<input id="sheet23" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup23" class="col">
<input id="typetxt23" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote23" class="col">
<input id="note23" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow24" class="row">
<div id="divsht24" class="col">
<input id="sheet24" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup24" class="col">
<input id="typetxt24" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote24" class="col">
<input id="note24" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow25" class="row">
<div id="divsht25" class="col">
<input id="sheet25" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup25" class="col">
<input id="typetxt25" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote25" class="col">
<input id="note25" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow26" class="row">
<div id="divsht26" class="col">
<input id="sheet26" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup26" class="col">
<input id="typetxt26" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote26" class="col">
<input id="note26" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow27" class="row">
<div id="divsht27" class="col">
<input id="sheet27" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup27" class="col">
<input id="typetxt27" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote27" class="col">
<input id="note27" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow28" class="row">
<div id="divsht28" class="col">
<input id="sheet28" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup28" class="col">
<input id="typetxt28" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote28" class="col">
<input id="note28" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow29" class="row">
<div id="divsht29" class="col">
<input id="sheet29" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup29" class="col">
<input id="typetxt29" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote29" class="col">
<input id="note29" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow30" class="row">
<div id="divsht30" class="col">
<input id="sheet30" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup30" class="col">
<input id="typetxt30" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote30" class="col">
<input id="note30" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow31" class="row">
<div id="divsht31" class="col">
<input id="sheet31" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup31" class="col">
<input id="typetxt31" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote31" class="col">
<input id="note31" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow32" class="row">
<div id="divsht32" class="col">
<input id="sheet32" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup32" class="col">
<input id="typetxt32" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote32" class="col">
<input id="note32" name="note[]" type="text" class="note">
</div>
</div>
<div id="divrow33" class="row">
<div id="divsht33" class="col">
<input id="sheet33" name="sheet[]" type="text" class="sheet">
</div>
<div id="divsup33" class="col">
<input id="typetxt33" name="typetxt[]" type="text" class="txt">
</div>
<div id="divnote33" class="col">
<input id="note33" name="note[]" type="text" class="note">
</div>
</div>
</div>
</div>
<script type="text/javascript">

window.onscroll=function(){
var x=document.getElementById('rowheader');

if(window.pageYOffset>x.offsetTop)
{
x.classList.add('sticky');
x.classList.remove('row');
}
if(window.pageYOffset<=x.offsetTop)
{
x.classList.remove('sticky');
x.classList.add('row');
}
}



</script>
</body>
</html>