انجمن ایران پی اچ پی
فیکس کردن یک دایو در بالای صفحه بعد از اسکرول - نسخه قابل چاپ

+- https://forum.iranphp.org - انجمن ایران پی اچ پی
+-- انجمن: کلاینت ساید/Client side (/Forum-%DA%A9%D9%84%D8%A7%DB%8C%D9%86%D8%AA-%D8%B3%D8%A7%DB%8C%D8%AF-Client-side)
+--- انجمن: JavaScript (/Forum-JavaScript)
+--- موضوع: فیکس کردن یک دایو در بالای صفحه بعد از اسکرول (/Thread-%D9%81%DB%8C%DA%A9%D8%B3-%DA%A9%D8%B1%D8%AF%D9%86-%DB%8C%DA%A9-%D8%AF%D8%A7%DB%8C%D9%88-%D8%AF%D8%B1-%D8%A8%D8%A7%D9%84%D8%A7%DB%8C-%D8%B5%D9%81%D8%AD%D9%87-%D8%A8%D8%B9%D8%AF-%D8%A7%D8%B2-%D8%A7%D8%B3%DA%A9%D8%B1%D9%88%D9%84)



فیکس کردن یک دایو در بالای صفحه بعد از اسکرول - ImanAzadi - ۱۳۹۳ مهر ۱۸ ۰۷:۵۳ صبح

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

عکس قبل از اسکرول
[تصویر:  v38arx0cmjmvidzx3hdd.jpg]

عکس بعد از اسکرول
[تصویر:  9pbj5wn7dvtqdhu50jpw.jpg]
کد کل صفحه رو میزارم اگر کسی میدونه لطفا بگه مشکل کد کجاست
کد:
<!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>



RE: فیکس کردن یک دایو در بالای صفحه بعد از اسکرول - webnevesht - ۱۳۹۳ مهر ۱۸ ۰۷:۴۲ عصر

من توی یکی از پروژه هام از همچین قطعه کدی استفاده کردم جواب داد:
میتونی اصلاح کنی و ازش استفاده کنی:
کد:
<script type="text/javascript">
  $(window).scroll(function () {
    var $heightScrolled = $(window).scrollTop();
    var $defaultHeight = 500;
    
    if ( $heightScrolled < $defaultHeight )
    {
        $('#menuitem').removeClass("sticky");
        }
    else {
        $('#menuitem').addClass("sticky");
        }
    
});



RE: فیکس کردن یک دایو در بالای صفحه بعد از اسکرول - ImanAzadi - ۱۳۹۳ مهر ۱۹ ۰۷:۰۴ صبح

دوست گرامی کد خودم هم همینه که شما نوشتید
از من با جاوا اسکریپت هست
شما با جی کوئری
لطفا یکی از دوستان که میدونه راهنمایی کنه


RE: فیکس کردن یک دایو در بالای صفحه بعد از اسکرول - mohammadhosain - ۱۳۹۳ مهر ۱۹ ۰۱:۵۶ عصر

کد:
<!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;
    
}
.sheetheader
{
    width: 40px;
}
.txtheader
{
    width: 290px;
}
.noteheader
{
    width: 140px;
}
.sticky
{
    position: fixed;
    width:490px;
    top: 0px;
    background-color: #0CC;
    height: 25px;
    margin-left: 5px;
}
</style>
</head>
<body>


<div id="tes">
</div>
<div id="test">
  <div id="tbl">
    <div id="rowheader" class="row">
      <div class="col sheetheader">
        Sheet
      </div>
      <div class="col txtheader">
        Typetxt
      </div>
      <div class="col noteheader">
        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>