below is code how to fix the header of pageblock table .

please give me solution if any buddy have.

Thanks.

<apex:page controller="DisplayListDataControllerOnContact" >
<script>window.setTimeout(sayHello,200000000)</script>
<apex:messages />
<style>
 .container
 {

 overflow:auto;
height:100px;

}
.headerStyle
 {
 position:relative;
 top:expression(this.offsetParent.scrollTop);
 z-index: 100;
}
 </style>
 <script type="text/javascript">
     function setTheVal(valFromPopup){
         document.theForm.aField.value=valFromPopup;
     }
 </script>

<apex:form id="theForm" rendered="{!(PopulateData.size != 0)}">
 
  <apex:pageBlock rendered="{!(PopulateData != null)}">
<apex:outputLabel value="Multiple matches returned from Infogroup" style="font-weight:bold"> </apex:outputLabel>  <br/><br/>
<apex:outputPanel layout="block" styleClass="container" >
   <apex:pageBlockTable value="{!PopulateData}" headerClass="headerStyle" align="top" width="100%"  var="Common"  >
            
<apex:column headervalue="Select" >
        
 <input type="radio"   name="rad"  value="{!Common.Id}~{!Common.RuleName}" onclick="changeValue(this,'{!$Component.RadioButtonValue}')"/ >     
     
     </apex:column>
     
  <apex:column value="{!Common.FirstName}  {!Common.LastName}" >
        <apex:facet name="header">Contact</apex:facet>
      </apex:column>  
              
<apex:column value="{!Common.Phone}"  >
        <apex:facet name="header">Phone</apex:facet>
      </apex:column>

 <apex:column value="{!Common.City}"  >
        <apex:facet name="header">City</apex:facet>
      </apex:column>

  <apex:column value="{!Common.StateProvince}"  >
        <apex:facet name="header">State</apex:facet>
      </apex:column>

 <apex:column value="{!Common.PostalCode}" >
        <apex:facet name="header">Zip</apex:facet>
      </apex:column>
       
  <apex:column value="{!Common.CompanyName}" >
        <apex:facet name="header" >Business Name</apex:facet>
      </apex:column>
              
          <apex:column >
        <apex:facet name="header">Line of Business</apex:facet>
      </apex:column>    
          
      
 </apex:pageBlockTable>
      </apex:OutputPanel>


  <apex:inputHidden value="{!selectedValue}" id="RadioButtonValue" />
  <apex:inputHidden value="{!strContactSFId}" id="hidContactSFId" />
 
<!--
 <apex:outputText value="{!selectedValue}" id="out"></apex:outputText>

  <apex:commandButton value="Compare" action="{!save}" rerender="out"  id="theButton" />
    -->
 <br/><br/>

  <apex:commandButton value="Stare & Compare"  onClick="opennewwindow('{!$Component.RadioButtonValue}','{!$Component.hidContactSFId}')"  id="theButton" />
  <apex:commandButton value="Import as New Contact"    id="theButton2" onClick="confirmcontact('{!$Component.RadioButtonValue}')" />
   </apex:pageBlock>
</apex:form>

 <script>
    function confirmcontact(textid)
    {
    

if(document.getElementById(textid).value == '')
{
alert('Please select one record');
return false;
}


return confirm('Are you sure to import new contact');
}

 
   function changeValue(input, textid)
    {
    document.getElementById(textid).value = input.value;
       
     }
           

function opennewwindow(textid,contactSFId)
{

if(document.getElementById(textid).value == '')
{
alert('Please select one record');
return false;
}

var str = document.getElementById(textid).value;
var contactId = document.getElementById(contactSFId).value;
  var requesttype;
 
var temprequesttype;
  var delimiter = "~";
//str = '402586844371~People-LastName';

var  temp = str.split('~');

// alert('hi..' + temp[0].length);
    
var strid;
strid =  parseInt(temp[0]) ;
if(temp.length < 2){
    requesttype = 'Company';
}
else{
    temprequesttype = temp[1];
}
var strsplit = temprequesttype.split('-')
requesttype = strsplit[0];
document.getElementById(textid).value = '';

var myUrl = '/apex/StareComparePageContact?requesttype='+requesttype+'&id='+temp[0]+'&ContactId='+contactId;

var encodetxt=encodeURI(myUrl)

encodetxt = encodetxt.replace('%E2%80%8B','');
/*encodetxt = encodetxt.replace('Ixsd2','');
alert(encodetxt);
alert(decodeURI(encodetxt));
*/
  /*window.name = 'Popup';
  var newwindow = window.showModalDialog(encodetxt,window,'unadorned:yes;dialogHeight:600px;dialogWidth:900px;left:100;top:100;scrollbars:yes;toolbar:no,status=no');
  */
 
  if(navigator.userAgent.indexOf("MSIE")!=-1)
  {
      var newwindow = window.open(encodetxt,'popup','unadorned=yes,height=600,width=900,left=100,top=100,scrollbars=yes,toolbar=no,status=no');  
  }
  else
  {
      var newwindow = window.showModalDialog(encodetxt,window,'unadorned:yes;dialogHeight:600px;dialogWidth:900px;left:100;top:100;scrollbars:yes;toolbar:no,status=no');
  }

  newwindow.focus();

}   
 </script>
 
         

</apex:page>

Hi

I am trying to fixed the header using <apex:pageBlockTable headerClass="#header-row{position:fixed;top:0;left:0; }">

using its "headerClass" attribute but its not worging .

 If any input will be much appreciate.

Thakns

Pravin.

Hi

I have a pageblock table on a Vf page with a scrollbar.

please anybody can help me to fix the header.

I know it is possible through java script. So if anybody  can share the javescript with me?