ITTreats.com

Dear Freinds,

I am back once again, Yesterday I did a Floating Page Heading for my website, infact you can see the effect right in this website. Once you are scrolling to the bottom of the Page, your page heading which is lying at the top of the web page won’t be visible. This Article will help you to float your WebPage Heading or Blog Page Heading or Article Heading to Float when you are scrolling to the bottom of the web page.

So Lets begin.

To achieve this Functionality I chose Jquery As my Javascript Framework, by which We can achieve this in a very simple lines of code.

1. Download the latest Jquery and put it in the Desired Location from where Your web page can read the Script, For WordPress users if you are using any Plugin check weather your Plugins are already using Jquery if so, There is no need to consider this step.
You can download the Latest Version of Jquery from http://code.jquery.com/

2. Now Add this Little CSS into your Head Section of the web page or header page for Floating Div.

 /*  Floating Div  */
<style>
.floatdiv{
position:fixed;
top:0px;
 
z-index:999;
height:30px;
 
border-top:none;
/*  Change your  BackGround  Color  and border You can even add  transparent Image  */
background-color:#FFFFCC;
border:2px dashed #000000;
color:#ffffff;
width:auto;
text-align:center;
display:block;
clear:both;
margin-left:auto;
margin-right:auto;
float:left;
 
}
</style>

Now, Ensure you are adding Specific Style tags for your Inner Content of the Floatdiv also.

3. Now, Make a Note of the Div ID where your Page heading or Blog Post Heading is residing in .

Make sure Only heading is in the DIV , If not add a Div tag to the Heading like below

 
<div  id="pageheading">
<h1>  This  is  My webpage  Heading   or  My Post  Heading </h1>
</div>

4. The Key part of the Task, Add the Following Javascript to the Head section of the Web page or at the Bottom of the web page and make sure to replace your ID of the PageHeading DIV .

 
<script>
/*  Javascript  for  Floating  the  DIV  . Make sure you have  added  CSS  to the web page  */
 
$(document).ready(function(){
var $top1= $('#pageheading').offset().top;      // Grab the  Div  Actual Position 
$(window).scroll(function(){   
    //  ADD   EVENT  when ever  the  web page is scrolling 
		//alert( $(window).scrollTop());
		//alert($(window).scrollTop()+'  top=='+$top1);
 //  Check  if the  Window  Position is   Greater than  the DIV  Position . if so  add the class
//  Else  remove the Class 
		if ($(window).scrollTop()>$top1)   
		{
		 $('#pageheading').addClass('floatdiv');
		}
		else
		 $('#pageheading').removeClass('floatdiv');
 
 
 
});
 
});
 
</script>

That’s IT, We did it. You can see the DEMO or Working on SAME PAGE, As you scrolling down to the bottom Our Page Heading DIV Will Assist you through out the Page.

ALL The Best, What Are you waiting for, Implement This in your Blog or Web site.

Written by adrevol

{adrevol has written 91 posts on ITTreats.com . See all posts by adrevol}