WPBeginner

Beginner's Guide for WordPress

  • Blog
    • Beginners Guide
    • News
    • Opinion
    • Showcase
    • Themes
    • Tutorials
    • WordPress Plugins
  • Start Here
    • How to Start a Blog
    • Create a Website
    • Start an Online Store
    • Best Website Builder
    • Email Marketing
    • WordPress Hosting
    • Business Name Ideas
  • Deals
    • Bluehost Coupon
    • SiteGround Coupon
    • WP Engine Coupon
    • HostGator Coupon
    • Domain.com Coupon
    • Constant Contact
    • View All Deals »
  • Glossary
  • Videos
  • Products
X
☰
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

WPBeginner» Blog» Plugins» How to Create a “Sticky” Floating Sidebar Widget in WordPress

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

Last updated on October 4th, 2019 by Editorial Staff
146 Shares
Share
Tweet
Share
Pin
Free WordPress Video Tutorials on YouTube by WPBeginner
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

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

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 click on the Save button to store your changes.

Make any widget a sticky floating widget

You can now visit your live site and scroll down. Your fixed widget will now become a sticky floating widget.

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.

Fixed widget options

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.

146 Shares
Share
Tweet
Share
Pin
Popular on WPBeginner Right Now!
  • Google Analytics in WordPress

    How to Install Google Analytics in WordPress for Beginners

  • How to Fix the Error Establishing a Database Connection in WordPress

    How to Fix the Error Establishing a Database Connection in WordPress

  • How to Start Your Own Podcast (Step by Step)

    How to Start Your Own Podcast (Step by Step)

  • Checklist

    Checklist: 15 Things You MUST DO Before Changing WordPress Themes

About the Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi. Trusted by over 1.3 million readers worldwide.

The Ultimate WordPress Toolkit

61 Comments

Leave a Reply
  1. Dileepa K says:
    Sep 1, 2020 at 3:46 am

    Good one. Thanks you.

    Reply
    • WPBeginner Support says:
      Sep 2, 2020 at 10:45 am

      You’re welcome :)

      Reply
  2. Akhtar says:
    Mar 15, 2020 at 7:11 am

    I’m learning very much from WPBeginner. Thanks for the great content.

    Reply
    • WPBeginner Support says:
      Mar 16, 2020 at 1:19 pm

      You’re welcome, glad you found our content helpful :)

      Reply
  3. Dapo Momodu says:
    Dec 8, 2019 at 8:47 am

    Perfect plugin and works like charm

    Reply
    • WPBeginner Support says:
      Dec 9, 2019 at 11:45 am

      Glad you liked our recommendation :)

      Reply
  4. Minosh says:
    Feb 1, 2019 at 12:12 am

    Work fine! Thanks!

    Reply
    • WPBeginner Support says:
      Feb 1, 2019 at 10:13 am

      Glad it helped :)

      Reply
  5. Giorgi says:
    Aug 23, 2017 at 6:08 am

    It used to work for me. Now it does not work for my website.

    Reply
  6. simon james says:
    Apr 30, 2017 at 4:31 am

    great vid thanks for sharing

    Reply
  7. Markus Martin says:
    Dec 15, 2016 at 7:15 pm

    How about the whole sidebar?

    Reply
  8. Steven Denger says:
    Nov 5, 2016 at 7:17 pm

    Well after working for hours last night and hours today I came across this plugin thinking that I have finally got the answer to sticky sidebar widgets. But no – when I installed the plugin it did absoutely nothing! I have the latest version of WP and a good working template that has no other problems working with all the other plugins so I have no idea why this will not work.

    Does anybody know how to get this plugin to work. I have just about given up on having fixed widgets. I have not won any lotteries lately to afford a developer to do it for me.

    Reply
  9. Aarohi says:
    Aug 23, 2016 at 6:21 am

    Nice tutorial. Thanks!

    Reply
  10. Shane says:
    Apr 19, 2016 at 2:17 pm

    ALL YOU GUYS DO IS USE PLUGINS FOR EVERY SOLUTION YOU PROPOSE! Please Change the titles of posts like this to: “How to Add a Sticky Floating Sidebar Widget in WordPress with Plugins”, as you are not actually “creating” anything. you’re just using a service someone else built.

    Reply
    • WPBeginner Support says:
      Apr 24, 2016 at 4:11 pm

      Our users are mostly beginners with little to no coding skills at all. Using a plugin is the safest way for them to add functionality in WordPress. From time to time we do publish articles with plugins as well as manual methods to achieve some functionality. But if we feel that manual method is too complicated for our target audience, then we show the plugin method alone. You may also want to take a look at our guide on how many plugins should you install on your WordPress site.

      Reply
    • Camilo Buitrago says:
      Jun 2, 2016 at 2:35 pm

      I don’t care if they use plugins for achieving the promised result.

      What I don’t like is finding that the plugins are outdated or the creator stopped updating it.

      So, what I would say is: please update your content and offer new options, or put a note explaining that it is an old plugin and may not work.

      Reply
      • Ron Robbins says:
        Jul 19, 2016 at 10:36 pm

        I think I smell a troll….if you don’t like their content, their are literally thousands of other sites around the web to do your “research”. ;)

        Reply
        • jay Boro says:
          Jul 26, 2016 at 8:50 am

          It stucks the smooth scrolling of the website.. So I would say – it’s a NO use plugin. You can feel the difference when once you uninstall them

    • Raj says:
      Nov 25, 2016 at 2:45 am

      Yeah because people who “create” do it without using anything else, just out of thin air! Everyone else deserves no respect.

      Reply
  11. Trish Sweeney says:
    Apr 17, 2016 at 7:51 pm

    Fantastically helpful – as always, tutorials extremely clear and easy to follow and incredibly useful. Very many thanks.

    Reply
  12. Aziz says:
    Apr 12, 2016 at 9:00 am

    Thanks for articled and the Good guides as usual , just wonderting if there is any alternatives as this plugin was not updated 2 years now and causinfg some conflict

    Reply
    • Michael Nielsen says:
      Apr 13, 2016 at 11:01 am

      Same problem here. It would be great with an update to this article. I am looking around for a similar plugin but there are only a few other options and the alternatives only focus fixed sidebars and not widgets.

      I really enjoyed the Q2W3 fixed widget but unfortunately it is no longer maintained.

      Reply
  13. Lyubo says:
    Dec 22, 2015 at 6:12 pm

    Hey guys,

    I also need this plug-in for one of my blogs, but I can’t get it to work with the Genesis theme. I just updated to the latest version that they released a couple of days ago. So I did play with the settings of the plug-in, changed the margins to different values, marked and unmarked the 4 tick-offs but it won’t work. Yes I did tick-off “fix” widget on the particular widget I want to stick. What happens is at the very bottom of my page it says:

    jQuery(document).ready(function(){ var q2w3_sidebar_1_options = { “sidebar” : “sidebar-alt”, “margin_top” : 110, “margin_bottom” : 120, “screen_max_width” : 0, “width_inherit” : true, “widgets” : [‘execphp-4’] }; q2w3_sidebar(q2w3_sidebar_1_options); setInterval(function () { q2w3_sidebar(q2w3_sidebar_1_options); }, 940); });

    Any help would be of great help – you can email me if you want me to show you my blog, as I don’t want to paste it here so it looks as if I am looking for a backlink :)

    Thanks in advance for any advice you might share

    Reply
  14. Dan says:
    Dec 19, 2015 at 3:37 am

    Does anyone know any alternatives to this plugin? It causes all kinds of issues with the Divi and Extra themes by Elegant Themes. Bugs were reported to the dev months ago but they seem to have gone un-fixed. Time to find an alternative… suggestions?

    Reply
  15. Frank Biganski says:
    Nov 25, 2015 at 5:38 pm

    Conflicted with the Total WordPress theme when using the built-in sticky header in Total. When Fixed Widget was active on a page, it caused the sticky header NOT to work so my header scrolled off the page. I reported the bug to author.

    Reply
  16. Sam says:
    Oct 1, 2015 at 4:18 am

    Is it compatible with Thesis ?

    Reply
  17. Cesar says:
    Sep 1, 2015 at 9:00 pm

    thank you bro, the plugin works like charm, this article really helpful

    Reply
  18. Anders says:
    Aug 29, 2015 at 3:19 am

    Awesome! works like a charm. Thanks for sharing.

    Reply
  19. Michael says:
    Aug 4, 2015 at 12:22 pm

    Can you make it scroll then at the bottom have it become part of the footer? For example on this page. When you get down to the widget section have it stop and be at the top of the widgets?

    Similar to how this site did there quote section. When you get to the bottom it becomes part of the footer.

    Reply
  20. Florian says:
    Jun 19, 2015 at 5:38 am

    Hey there,

    Unfortunately I can not get it to work.
    How do I do exactly what you did on your page?
    So I would like to have a banner on the bottom end of the Page with a Text in it.

    Also I would like it not to show up on the phone. What is the pixel-number for that?

    Thank you!

    Reply
  21. Chrissy says:
    Jun 7, 2015 at 10:29 am

    Thank you so much for the tutorial. I had been seeing this around the web and wondered how to accomplish the same effect. The margin bottom option worked GREAT because it was also getting into the footer! You guys are awesome!

    Reply
  22. Umer Iftikhar says:
    Apr 16, 2015 at 4:34 am

    I was in search of this Thanks wpbeginner for your help. But I have one confusion. Let’s say I want to fix the top widget. But when I did it and scrolled down, it just hided the other one which was not in the position as I wanted. Can you help me for this? Like let’s suppose when I completely scroll down the page, after all widgets, then it should start being fixed. Is that possible?

    Thanks.

    Reply
  23. Nathan says:
    Jan 6, 2015 at 2:14 am

    Great, thanks. I just got my WordPress site off their domain and on to my own – so now I can even use all these great plugins. I’ll surely try this out sooner or later.

    Reply
  24. Joel says:
    Nov 23, 2014 at 12:34 am

    I need this to work with css and shortcodes. Planning on making a version to support this?

    Reply
  25. orangorangan says:
    Nov 17, 2014 at 5:55 am

    the plugin works only for text widget, not on my custom widgets, any idea why? thanks :)

    Reply
  26. jen says:
    Feb 12, 2014 at 2:44 pm

    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?

    Reply
  27. Nazir Hack says:
    Feb 10, 2014 at 5:56 am

    Thanx Bro

    Reply
  28. Michal Chovanak says:
    Jan 16, 2014 at 3:14 pm

    This is a realy great post, thanks

    Reply
  29. Drosanski says:
    Dec 19, 2013 at 5:11 am

    For me not working -.- ;(

    Reply
  30. Mohsin Ali says:
    Sep 14, 2013 at 2:50 pm

    Hi, thanks … this plugin is working.

    Reply
  31. Robert says:
    Sep 10, 2013 at 3:32 pm

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

    Reply
    • WPBeginner Support says:
      Sep 10, 2013 at 4:44 pm

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

      Reply
  32. Usama Siddiqui says:
    Aug 8, 2013 at 1:35 pm

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

    Reply
  33. Prashant Ghai says:
    Jul 31, 2013 at 7:47 am

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

    Reply
  34. Raja says:
    Jun 29, 2013 at 1:44 pm

    Worked like a charm.

    Reply
  35. Grant says:
    Jun 14, 2013 at 3:03 pm

    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?

    Reply
    • Editorial Staff says:
      Jun 16, 2013 at 9:31 am

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

      Reply
  36. Ayush Agrawal says:
    Jun 13, 2013 at 2:43 am

    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?

    Reply
    • Editorial Staff says:
      Jun 13, 2013 at 10:01 am

      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.

      Reply
      • Daniel Lemes says:
        Oct 18, 2013 at 12:42 pm

        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.

        Reply
        • WPBeginner Support says:
          Oct 21, 2013 at 8:24 pm

          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.

      • Pundie says:
        Jun 10, 2015 at 3:24 am

        I don’t understand, you said: “They will allow it if the sidebar remains static and the content is the one that is scrolling”

        Isn’t that exactly what we are trying to do here? Display AdSense in a static sidebar widget, and have our page content scrolling. Therefore you just clarified this IS allowed.

        The whole double-sidebar thing you mentioned is just weird, and terrible web design.

        Reply
  37. Rednasil says:
    Apr 21, 2013 at 2:15 am

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

    Reply
    • Rednasil says:
      Apr 22, 2013 at 5:45 am

      Nevermind, the last update fixed the issue

      Reply
  38. Howard Lee Harkness says:
    Apr 16, 2013 at 3:52 pm

    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.

    Reply
    • Ayush Agrawal says:
      Jun 12, 2013 at 8:54 am

      Did you press the save button ?

      Reply
  39. Grant Kessler says:
    Apr 16, 2013 at 3:18 pm

    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!

    Reply
    • Editorial Staff says:
      Apr 18, 2013 at 8:31 am

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

      Reply
  40. Ra-Dzik says:
    Apr 16, 2013 at 8:28 am

    Nice tutorial. Thanks!

    Reply
  41. Mukesh Mali says:
    Apr 16, 2013 at 8:24 am

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

    Reply
  42. Darnell Jackson says:
    Apr 16, 2013 at 8:18 am

    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.

    Reply

Leave a Reply Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

Over 1,320,000+ Readers

Get fresh content from WPBeginner

Featured WordPress Plugin
SeedProd Logo
SeedProd
Create beautiful custom landing pages - Drag & drop builder. Learn More »
How to Start a Blog How to Start a Blog
I need help with ...
Starting a
Blog
WordPress
Performance
WordPress
Security
WordPress
SEO
WordPress
Errors
Building an
Online Store
Useful WordPress Guides
    • 7 Best WordPress Backup Plugins Compared (Pros and Cons)
    • How to Fix the Error Establishing a Database Connection in WordPress
    • Why You Need a CDN for your WordPress Blog? [Infographic]
    • 30 Legit Ways to Make Money Online Blogging with WordPress
    • Self Hosted WordPress.org vs. Free WordPress.com [Infograph]
    • Free Recording: WordPress Workshop for Beginners
    • 24 Must Have WordPress Plugins for Business Websites
    • How to Properly Move Your Blog from WordPress.com to WordPress.org
    • 5 Best Contact Form Plugins for WordPress Compared
    • Which is the Best WordPress Popup Plugin? (Comparison)
    • Best WooCommerce Hosting in 2021 (Comparison)
    • How to Fix the Internal Server Error in WordPress
    • How to Install WordPress - Complete WordPress Installation Tutorial
    • Why You Should Start Building an Email List Right Away
    • How to Properly Move WordPress to a New Domain Without Losing SEO
    • How to Choose the Best WordPress Hosting for Your Website
    • How to Choose the Best Blogging Platform (Comparison)
    • WordPress Tutorials - 200+ Step by Step WordPress Tutorials
    • 5 Best WordPress Ecommerce Plugins Compared
    • 5 Best WordPress Membership Plugins (Compared)
    • 7 Best Email Marketing Services for Small Business (2021)
    • How to Choose the Best Domain Registrar (Compared)
    • The Truth About Shared WordPress Web Hosting
    • When Do You Really Need Managed WordPress Hosting?
    • 5 Best Drag and Drop WordPress Page Builders Compared
    • How to Switch from Blogger to WordPress without Losing Google Rankings
    • How to Properly Switch From Wix to WordPress (Step by Step)
    • How to Properly Move from Weebly to WordPress (Step by Step)
    • Do You Really Need a VPS? Best WordPress VPS Hosting Compared
    • How to Properly Move from Squarespace to WordPress
    • How to Register a Domain Name (+ tip to get it for FREE)
    • HostGator Review - An Honest Look at Speed & Uptime (2021)
    • SiteGround Reviews from 4464 Users & Our Experts (2021)
    • Bluehost Review from Real Users + Performance Stats (2021)
    • How Much Does It Really Cost to Build a WordPress Website?
    • How to Create an Email Newsletter the RIGHT WAY (Step by Step)
    • Free Business Name Generator (A.I Powered)
    • How to Create a Free Business Email Address in 5 Minutes (Step by Step)
    • How to Install Google Analytics in WordPress for Beginners
    • How to Move WordPress to a New Host or Server With No Downtime
    • Why is WordPress Free? What are the Costs? What is the Catch?
    • How to Make a Website in 2021 – Step by Step Guide
Deals & Coupons (view all)
EWWW Image Optimizer
EWWW Image Optimizer Coupon
Get 15% OFF on EWWW Image Optimizer WordPress plugin for image resizing.
Amelia
Amelia Booking Plugin Coupon
Get 20% OFF on Amelia WordPress appointment and event booking plugin.
Featured In
About WPBeginner®

WPBeginner is a free WordPress resource site for Beginners. WPBeginner was founded in July 2009 by Syed Balkhi. The main goal of this site is to provide quality tips, tricks, hacks, and other WordPress resources that allows WordPress beginners to improve their site(s).

Join our team: We are Hiring!

Site Links
  • About Us
  • Contact Us
  • FTC Disclosure
  • Privacy Policy
  • Terms of Service
  • Free Blog Setup
  • Free Business Tools
  • Growth Fund
Our Sites
  • OptinMonster
  • MonsterInsights
  • WPForms
  • SeedProd
  • Nameboy
  • RafflePress
  • Smash Balloon
  • AIOSEO

Copyright © 2009 - 2021 WPBeginner LLC. All Rights Reserved. WPBeginner® is a registered trademark.

Managed by Awesome Motive | WordPress hosting by SiteGround | WordPress Security by Sucuri.