Many people ask me about how to create a Facebook like floating bar. Although it is a bit jerky but the technique quite useful in keeping certain portion of the web page always in front of user’s eyes. It is pretty easy if you want to create a floating bar that touches any of the screen edges, left, right, top or bottom. Just create the bar using a DIV element and float it using position:fixed CSS rule. In addition, you can use right: 0 and bottom: 0 for placement of your bar. For example: This CSS code will give you floating bar placed at the bottom edge of the screen. Use the following method if the portion-to-be-floated is located somewhere in the middle of the web page and you want to make the bar float only when user scrolls the screen. IMPORTANT: This technique makes use of jQuery. Your website must include jQuery library before you use this technique. WordPress and many other CMS already come loaded with jQuery. Check the documentation of you blogging or CMS platform. If your website does not have jQuery -paste the following line in the HEAD section of your webpage to include the library: This code fetched the jQuery library from Google servers and load as part of your web page. Now here are the codes for creating floated content. HTML code CSS rules JavaScript code That’s it! Enjoy the floating content! BUT let me advise you not to put AdSense ads in such floating segments -because this is against AdSense policy. I hope this was useful for you. Please feel free to ask if you have any questions on this topic. I will be happy to try and help you. Thank you for using TechWelkin. Comment * Name * Email * Website
Δ
