2013 April 24 Archive - EXEIdeas – Let's Your Mind Rock

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. #Demo {padding: 5px;border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; background:#F8F8F8; box-shadow: 3px 3px 3px #D44B2C; width:200px; } #Demo{margin-bottom:5px;} #Demo a{color:#D44B2C;background:#F8F8F8;padding:8px 14px;display:inline-block;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px} #Demo a:hover{color:#fff;text-shadow:0px 1px 0px #000;background:#D44B2C;text-decoration:none} CLICK HERE TO SEE DEMO 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.com2.) Open Your Desire Blog.3.) Go To “Template“.4.) Click “Edit HTML“.5.) Click “CTRL+F” To Find 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 “ … “.3.) Save It, Now You Are Done. .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%;} // = 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() Now Copy The Below Code And Add It Anywhere Between … Tags In Blog Or Site, Save And Done. 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. 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.