Placed in: Home
| Create a sticky sidebar or box |
|
After my previous article on how to create a peeling corner on your website, I now give you another great thing for your website. I'll explain how to create a sticky sidebar or box that will scroll down with the user. Excellent to put your navigation in, promoting your RSS Feed or placing advertisement.  This technique uses CSS and JavaScript. Works in IE7+, Firefox, Opera and Safari. Hi!Try scrolling down on this page. You'll see this box moving down with you. It'll stay on the top-right corner of the page. This technique uses CSS and JavaScript. Works in IE7+, Firefox, Opera and Safari.
Enjoy!If you're reading this, you should be able to see the sticky sidebar on the top-right corner of this page. It'll scroll down with you, but will stop when you scroll up untill the line of my header. When you're using IE7, please go directly to the demo page to see it working correct. IE7 needs the correct The CSS Copy the following CSS code: #content { position:absolute; right: 0; top: 221px; width: 150px; padding: 0 30px 50px 15px; font-size: small; color: #FFFFFF; } .sidebox { background: #92A4AE no-repeat left bottom; }and save it as sidebar.css. Change the number "221" to the position you want your sidebar to be stuck on. I had it on 221 since it's the height of my header. The JavaScript To get this to work, I used the MooTools framework. Next, I added some additional code. Select the code above and save it as sidebar.js. Again, change the number "221" to the position you want your sidebar to be stuck on, just like with the CSS code. Uploading the files Now you're all set to upload the files to your web server. Upload the following files:
Installing on your site Now add the following line in to your webpage. Make sure your source (src) direction is correct. <script type="text/javascript" src="sidebar.js"></script> <script type="text/javascript" src="mootools.js"></script> That's it! Refresh your page and you should now have your own sticky sidebar on your webpage. Feel free to change the CSS or JavaScript code to your own needs. There's one catch: It doesn't work in Internet Explorer 6. But since Firefox is taking of the world and IE7 is now more and more used, I still wanted to post this article. Attached files:
Where are you going to use the sticky sidebar for? Tags: sticky sidebar webdesign website internet how to Interested in this topic? You might enjoy another article I've written called
Did you like this article? Subscribe to my feed or email to keep updated on new articles. Spread the word and submit to:    
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
ide:' />
,
| < Prev | Next > |
|---|
| Subscribe | ||
|---|---|---|
|
| Search |
|---|
| Or try the sitemap |
Friends of Marcofolio.net
2007 - 2013 Marcofolio.net
This (we)blog brings you information about (web)design, blogging tips, (programming) tutorials and much, much more. I can't describe Marcofolio.net in words: Just look around and be amazed. Many (new) visitors have a habit to stick around, just because of the variety of articles.
Have fun reading this blog and don't forget to subscribe to the feed to keep updated on the latest articles.