LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » HTML-CSS-PHP-JavaScript / JavaScript Codes » Simple Float DIV Stick To Top After Scroll With Changing It’s CSS

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

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.

Recommended For You:
Most Used HTML DOM Events Attributes For WebDesigners

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.

Recommended For You:
A History Of HTML5 Past, Present And Future Via Infograph

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='https://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 Recipe With Your Friends Using...

4 Responses to “Simple Float DIV Stick To Top After Scroll With Changing It’s CSS”

  1. Anonymous says:

    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…

  2. Chandz says:

    works 100% and i like it.. thank you for your hard work… thank you thank you 😀

Leave a Reply

Your email address will not be published. Required fields are marked *