Beginner's Guide for WordPress - Start your WordPress Blog in minutes.
Choosing the Best
WordPress Hosting
How to Easily
Install WordPress
Recommended
WordPress Plugins
View all Guides

How to Create a “Sticky” Floating Sidebar Widget in WordPress

Last updated on by
Elegant Themes
How to Create a “Sticky” Floating Sidebar Widget in WordPress

Floating elements that sticks to your screen as you scroll tend to have a higher click through and conversion rate than static objects. This is why many websites make use of floating elements through out their website. We have seen elements like header bar, footer bar, sidebar widget with newsletter optin, etc. In the past we showed you how to create a sticky floating footer bar in WordPress like we are using on WPBeginner. In this article, we will show you how to create a sticky floating sidebar widget in WordPress, so you can make your email newsletter stand out even more.

Note: This works for all type of sidebar widgets, not just your email optins. You can use it for product promotions, popular posts, flickr photos, google calendar, and basically anything else that you like.

Sticky sidebar floating widget demo

First thing you need to do is install and activate the Q2W3 Fixed Widget (Sticky Widget) plugin. After activating the plugin, go to Appearance » Widgets and click on the widget that you want to make sticky. The plugin adds a Fixed Widget option in all of your widgets. Check the Fixed widget box and save changes. Go to your live site and scroll down. Your fixed widget will now be a sticky floating widget.

Making a widget sticky by checking the fixed widget checkbox

Sticky Widget plugin comes with options to configure the positioning of the fixed widgets. Go to Appearance » Fixed Widget Options to configure the plugin. On this page you can set the margins, add your own HTML IDs and even disable the fixed widgets on phone and tablets.

Configuration options for sticky floating sidebar widget plugin

Sticky floating sidebar widgets can be used to boost sign ups, showcase content, and increase overall user loyalty. You can have multiple fixed widgets in a sidebar. However, these could easily get annoying and can have an adverse affect too. Keep a balance in your design, so you don’t frustrate your users.

We hope that this article helped you implement a sticky floating sidebar widget in your WordPress website. You can put a sticky footer bar, a sticky top navigation, and a sidebar widget. Which one would you rather use on your website? Let us know in your comments below.


Editorial Staff at WPBeginner is a team of WordPress lovers led by Syed Balkhi. Page maintained by Syed Balkhi.

WPBeginner's Video Icon
Our HD-Quality tutorial videos for WordPress Beginners will teach you how to use WordPress to create and manage your own website in about an hour. Get started now »
  • jen

    I tried to combine this with the ad inserter plug in and it did not work. It does not allow for the option to make ad widget sticky. Any suggestions on a fix or work around?

  • Nazir Hack

    Thanx Bro

  • Michal Chovanak

    This is a realy great post, thanks

  • Drosanski

    For me not working -.- ;(

  • Mohsin Ali

    Hi, thanks … this plugin is working.

  • Robert

    Hi, love the plugin, but it breaks my slideshows in my woothemes. They won’t load anymore. Is there a solution for this maybe?

    • http://www.wpbeginner.com/ WPBeginner Support

      This could be a bug, you can report it at the plugin’s support forum

  • Usama Siddiqui

    I have tried this plugin on my website. But its not working :( is there any alternative to this plugin?

  • Prashant Ghai

    Thanks for sharing the info. about this plugin. Really made it a smooth sailing on my blog.

  • Raja

    Worked like a charm.

  • Grant

    Hi I have had this plugin for a while and it works great but whenever there is a page that is shorter than my sidebar, when you try to scroll down the sticky widget which I have gets all fidgety and doesn’t let you scroll down to the bottom. Does anyone know how to fix this?

    • http://www.wpbeginner.com Editorial Staff

      Do you have an example of that page? Can you send us an email about it Grant, so we can take a look.

  • Ayush Agrawal

    Is it OK to make Adsense ads sticky? I mean if I place Adsense ad code in a widget and make it sticky will it violate the TOS?

    • http://www.wpbeginner.com Editorial Staff

      No that is not allowed by Adsense. The wording is tricky. They will allow it if the sidebar remains static and the content is the one that is scrolling. So if you have two scroll bars like The Next Web design has, then you can do it.

      • Daniel Lemes

        Hi, could you could point out where, in terms of AdSense is explicitly stated that this is illegal? I haven’t found a word about it. 9gag and many others still using this kind of floating block.

        • http://www.wpbeginner.com/ WPBeginner Support

          Like we said earlier the wording is tricky, and in some situations you may be able to pull it off. But for smaller publishers it is always better to be safe than sorry.

  • Rednasil

    Does anybody know how to get this working for the genesis framework??
    I’ve been trying with no luck.

    • Rednasil

      Nevermind, the last update fixed the issue

  • Howard Lee Harkness

    I tried this plugin on my MailChimp widget, and it doesn’t appear to do anything. It also automatically unchecks itself whenever I close the setup page.

    • Ayush Agrawal

      Did you press the save button ?

  • Grant Kessler

    Everything works beautifully until the footer of the page comes! How can I get it to stop being a fixed object when it hits the footer? There is always this terrible, sloppy, and messy, overlapping. Thank you for your time!

    • http://www.wpbeginner.com Editorial Staff

      In the plugin settings, you can add margin bottom. Just put the footer’s height there, and it should be fine.

  • Ra-Dzik

    Nice tutorial. Thanks!

  • Mukesh Mali

    I am already implemented in my site and using it for improving the subscribers to my channel.

  • Darnell Jackson

    YO

    Thanks for sharing this man I’ve been looking for an easy way to implement this effect.

    I’ll have to test it right away if it works it’s going live on my blog this week thanks bro.