Announcement:

  Hello, We Changed Our Cloth, How It Is Looking? Leave Your Feedback At Our Page.

Wednesday, April 24, 2013

Simple Float DIV Stick To Top After Scroll With Changing It's CSS

This Article Was Live On: Wednesday, April 24, 2013 And Till Now Have4 comments.
Simple Float DIV Stick To Top After Scroll With Changing It's CSS

There are times when you would want to display a bar at the top of the page when user scrolls on the page and it should go back to its original position when the user scrolls back up. This is particularly useful when you want to add say a share bar, a search bar, etc and make it always visible even when the user is at the bottom of the page.

Here we have simple but awesome normal DIV code that is able to float all over the browser untill the page is up to the DIV position then this DIV will stick to top of your browser page after scrolling and also changed it's CSS while sticking. It's best for placing social sharing widgets or menu bar that should be remain in view of visitor to move forward or share this article and time.

In my example I would be displaying a bar after a paragraph of text, and when the user scroll below that, the bar will stick to the top and have different CSS. When the user scrolls back to the top the bar will go back to its original position and the CSS will be changed. By using jQuery, CSS and some HTML we can easily implement this. Below are the code snippets that would be required to implement this.

Features:

1.) Simple But Awesome Code.
2.) HTML-CSS-JavaScript Based Code.
3.) JQuery 1.7.1 Added, Don't Add If You Already Have.
4.) Fully Customizable CSS Added.
5.) Short Code, Easy To Add And Quick To Load.
6.) It Will Remain Keep Your Desired DIV On Browser Screen.
7.) You DIV Will Remain Moving Untill Your Page Will Be Scrolled.
8.) After Page Up, This DIV Will Stick On Top Of The Browser.
9.) The CSS Of DIV Will Be Different After Sticking On The Top Of Browser.
10.) And Your CSS Will Be Back After Releasing It From Top.
11.) Fully Changeable CSS, Size etc Before And After The Sticking.
12.) Best To Add Social Sharing Button Or Menu Bar.
13.) 50% Of Top Sites Are Using It.
14.) You Can Add Only One DIV On A Page/Post...
15.) You Can Add Any Data Like Text, Image, HTML, CSS, JQuery, JavaScript, Frame, PHP etc.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To "Template".
4.) Click "Edit HTML".
5.) Click "CTRL+F" To Find </head> Tag.
6.) Now Copy The Below Code And Paste It Before It.
7.) Click Save, Now You Are Done.

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between "<head>...</head> ".
3.) Save It, Now You Are Done.

<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<style type='text/css'>
.exe_floating_main_div{
height:0px;
margin:0;
padding:0;
}
.exe_floating_data_div{
background:#FFF;
border:1px solid #CCC;
margin:0 0 10px;
z-index:100;
height:50px;
font-size:18px;
font-weight:bold;
text-align:center;
width:100%;
}
</style>
<script type='text/javascript'>
//<![CDATA[
$(window).scroll(function(e) {
var exe_floating_main_div = $(".exe_floating_main_div").offset().top;
if ($(this).scrollTop() >= exe_floating_main_div && $('.exe_floating_data_div').css('position') != 'fixed')
{
$('.exe_floating_data_div').css({
'background': '#CCC',
'border': '1px solid #000',
'position': 'fixed',
'top': '0px' 
});
$('.exe_floating_main_div').css('height', '50px');
}
else if ($(this).scrollTop() < exe_floating_main_div && $('.exe_floating_data_div').css('position') != 'relative')
{
$('.exe_floating_main_div').css('height', '0px');
$('.exe_floating_data_div').css({
'background': '#FFF',
'border': '1px solid #CCC',
'position': 'relative'
});
}
});
//]]>
</script>

Now Copy The Below Code And Add It Anywhere Between <body>...</body> Tags In Blog Or Site, Save And Done.
<div class="exe_floating_main_div"></div>
<div class="exe_floating_data_div">This Is Your Floating DIV Data Space That Will Stick To Top Of Browser After Scroll To Down And Also Change It's CSS While Sticking Top.</div>

Customization:

1.) Change All The Black Bold Text With Your Desired CSS.
2.) Chnage The Blue Text With Your Data Like Text, Image, HTML, CSS, JQuery, JavaScript, Frame, PHP etc.
3.) Save And Done.

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



4 comments :

  1. Thanks for sharing out this code, I Saw it many time over different website but i was unable to find that one for mine site but you did it well. Keep posting as same...

    ReplyDelete
    Replies
    1. Thanks For Liking Our Content And Code, Be With Us To Get More Like This...

      Delete
  2. works 100% and i like it.. thank you for your hard work... thank you thank you :D

    ReplyDelete
    Replies
    1. Thanks For Liking Our Widget And Welcome Here, Be With Us To Get More...

      Delete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.