HC-Sticky – jQuery Floating Sticky Plugin

HC-Sticky is a cross-browser jQuery plugin that makes any element on your page float.

It is used for sidebars on long pages, so they can be visible all the time user scrolls down the page, instead of a empty space visitors usually see. It is also used for floating top menus, emphasizing it to the user at all time.

It is designed to be flexible, but very easy to use. HC-Sticky applied to a content makes it fixed on the page and always visible no matter how high the page is, or how high the sticky content is. Its packed with many interesting features in case you need them.

HC-Sticky is compatible with all modern web browsers, including IE7, IE8. It requires jQuery 1.7.1or later to work properly (new version of the plugin not tested).


While searching for this kind of plugin I’ve found none that has all the features I needed. The most important of all, I needed for the sticky element to continue scrolling down if it is bigger than the document itself, until it reaches its end. Then for example if I have some Adds in my sidebar, I needed the ability to specify an inside element that I want sticky to stop at, instead of stopping at containers top.

HC-Sticky has three modes of working:

  • Referring to its container
  • Referring to any given element
  • Referring to the Document

hcSticky working modes

When ran in the first mode, parent element of sticky content acts like its container. Your sticky content will follow the page until the bottom of it reaches bottom of its parent element, and then it will stop. The same is when you scroll up. Its ideal for sidebars.

The second mode is same as the first, except instead of a container sticky uses elements you gave him as its referrer for height.

In the third mode, sticky content is referred to a Document top and bottom, ignoring any element before or after. Ideal for top menus.


You can set additional options, like distance from top or bottom when to start or stop floating, or even inside element of your sticky content that you want to be top starting point. Great when you have some important widget inside your sidebar that you want to signify.

Property Default Type Description
top 0 int The distance from the top of the Window at which to trigger HC-Sticky.
bottom 0 int The distance from the bottom of the Window at which to glue HC-Sticky.
innerTop 0 int The distance from the top inside of the sticky content at which to trigger HC-Sticky.
innerSticker null jQuery selector Element at which to trigger HC-Sticky instead of top of sticky container. This has higher priority than innerTop option.
bottomEnd 0 int The distance from the bottom of the referring element at which to stop HC-Sticky.
stickTo null jQuery selector / jQuery object Element that represents the reference for height instead of height of the container. Usedocument for top menus.
responsive true boolean When set to true, HC-Sticky will recalculate its dimensions and position on resize.
offResolutions null int / array Set resolutions at which HC-Sticky will turn itself off. If integer is negative, it will turn off below given resolution, if positive it will turn off above it. Example: [-780, 1600]
followScroll true boolean When set to false, sticky content will not move with the page if it is bigger that Window.
className “sticky” string HTML class that will be applied to sticky element while it is floating.
wrapperClassName “wrapper-sticky” string HTML class that is set to wrapper that HC-Sticky creates around your sticky element.
onStart false function Callback function on plugin Start event (when the element starts floating).
onStop false function Callback function on plugin Stop event (when the element stops floating and returns to its normal state).

How to use

Include jquery.hc-sticky.js after jQuery, like any other jQuery plugin.

<!-- jQuery -->
<script src="path/to/jquery.js"></script>

<!-- HC-Sticky script -->
<script src="path/to/jquery.hc-sticky.js"></script>

The .hcSticky() method is called on the selector for which you want to float on the page. For example:


That way you load all default options. If you want to set any of them, pass them to sticky like this:

  top: 50,
  bottomEnd: 100,
  wrapperClassName: 'sidebar-sticky'

Be sure to run it after DOM has been loaded.


You can change your settings at any time, just pass new values to your element like described above. Don’t worry about other options you set at first, sticky will update only newly set values.


It also has some additional commands you can use. Example:

Command Description
stop Stops the sticky while preserving its current position.
off Turnes off the sticky completely.
on Turns the sticky back on after above two commands.
reinit Recalculates sticky size. Useful after altering DOM elements inside sticky.

Do not reinit sticky on Window resize, if responsive options is turned on it will do it automatically. Reinit it only if you’ve updated its content or changed its dimensions.

How does it work

When called, HC-Sticky first wraps your element with a <div> element, copying necessary styles from your element (width, height, float, left, right, top, bottom…). Wrapper acts as a substitution for your element, that way preserving your layout. Once your sticky content touches top limit, its position becomes fixed, and stays like that until you scroll down to bottom limit.

You can also get the latest unminified version if yu want to see the sourcecode.


We hope that you find this plugin useful. If you notice any bugs, or have some suggestions about it, please feel free to write below in the comments.

HC-Sticky is © 2012 by Some Web Media and licensed under the MIT license.


  1. Hi, just noticed that there is a little error in your JS. In line 119 from the unminified file there is a “$this” which should be a “this”. Maybe you can correct that :)

  2. Dude, when will you create github account? It’s hard to track lots of plugins by visiting their website!

  3. PKL

    Cool plugin, just I’ve had some nasty times with a bug when pressing F5 whereas the page is scrolled – the fixed elements gets misplaced( happens on this webpage btw)

    Here is the fix I’ve found:
    // just in case someone set “top” larger than elements style top
    if (init === true) {
    $this.css(‘top’, ($this.css(‘position’) == ‘fixed’) ? $this.data(‘hcSticky’).top – top_spacing : 0);

    1. Yu

      Hi, did u fixed the refresh issue? Im having bugged a lot by this issue. Since you mentioned this code will solve, where u put it? thanks !

  4. Arnaldo

    Nice job! Very elegant and effective.

    I think got little luck =|
    I have a temporary View (Backbone.View) and I aplly the hcSticky with sucess. I can see the wrapper there, everything looks good and works!

    But after dismissing the view (destroy/remove) I keep receiving this when scrolling the page:

    Uncaught TypeError: Cannot read property ‘noContainer’ of undefined jquery.hcsticky.min.js:12
    $.fn.extend.hcSticky.each.f jquery.hcsticky.min.js:12
    st.event.dispatch jquery-1.9.0.min.js:2

    If I load the temp View once again, hcSticky fails.

    Any tips?

    Thanks in advance.

    1. Tim

      I have exactly the same problem with the same error message.

      Any one have an idea about how to solve it?


  5. I want to use it in multiple area in the same page. I mean a class selection.. How do I ?

  6. It’s a great plugin.
    I have the sticky wrapped in a div that is floated to the right. As soon as the sticky loads, it jumps outside of the div its wrapped in.

  7. hey, just tried to use your plugin for my wordpress-bootstrap template but it doesn’t work. Wrapped the whole navigation into a container called stickynavbar … loaded the script like this wp_register_script(‘hcsticky’, (“http://someweblog.com/scripts/hcsticky/jquery.hcsticky-min.js”), false);
    wp_enqueue_script(‘bootstrap-transition’); … where is the problem?

    1. Have you run the hcSticky on your element anywhere? For example: $(‘.stickynavbar’).hcSticky();

      1. LInk to website is: fhhtest.comuf.com … may be a little laggy but if you size the site to tablet or smartphone resolution, there is no button to drop down the navigation =(

    2. sorry … found the problem … but there appeared another one: thw responsiveness ov my navigation disappeared … why is this?

      1. There is currently a bug with responsive elements. It should be fixed soon. My apologies for that.

        1. ah okay … nice thought it is again my fault :) thank you for this nice plugin! works fine ;) just need to make a nice sidebar then it’ll be perfect

  8. Rick Moss

    Thanks for the amazing plugin! This is just what I needed to get my fixed navigations performing consistently across browsers. Keep up the good work!

  9. This would be a lot easier to submit if the code was on github, but here’s a fix for the ‘Cannot read property ‘noContainer’ of undefined’ issues when running the plugin multiple times per page load. Replace lines 281-287 of the unminified file with the following:

    // get referring element
    $referrer = ($this.data(‘hcSticky’) && $this.data(‘hcSticky’).noContainer) ? $document : $wrapper.parent();

    // check if we need to run sticky
    if (!($this.data(‘hcSticky’) && $this.data(‘hcSticky’).on) || $this.outerHeight(true) >= $referrer.height()) return;

    1. Thanx for this, will look into it. I will put this on GitHub, just I’m a bit too busy these days ;)

  10. Hey thanks for this, I gave it a try on a WordPress site running genesis, inserted the script through genesis theme options for header. Is it compulsory to load a specific version of jquery, will the built in jquery for wp not suffice?

  11. Youri

    Great work! Really want to use this on a project I’m currently working on but it seems a bit buggy on touch devices. Have you experienced this and are you planning to fix this?

  12. Jonas

    Hi, great plugin!
    Though, came to some issue. When floating sidebar reaches the bottom, and attribute possition changes to absolute, on window resize sidebar possition changes to fixed again, and does update to absolute only when you scroll with the mouse weel.
    So each time I resize the window, it jums lower then bottom restriction.

  13. Michael

    I’m really digging this plugin so far. On my current project however, it appears I am unable to turn the sticky off with the off method you describe above. I need it to turn itself off at various breakpoints. Unfortunately, it always stickies the items, regardless if I’m telling it to turn itself off. Any ideas on how I can get it to turn off?

    1. Michael

      Correction on my part: the off method works in that it stops applying a position fixed on the element in question. However, it leaves behind the generated markup and inline styles, which break the layout at breakpoints that I don’t wish to have the sticky active. Is there a destroy method that would allow me to disable the sticky while also removing that markup and inline styling?

      1. Good idea, I’ll see to implement ‘destroy’ method, currently there is no such thing, sorry.

        1. Michael

          No worries. Thanks for listening; that would be an awesome addition! Look forward to it.

  14. Cory C

    Great plugin – Just wanted to ask if you have a current revision history?
    Also it would be nice to see it on github soon.
    Thanks again!

    1. Hi, could you please explain how you got this working in IE8? I’ve followed the article you reference and I’ve not had any success…. I would really appreciate any help you could send my way ;)

        1. I’ve taken yor changes (simplified them a little), its now on GitHub so you can track it. Cheers

  15. There seems to be a long repositioning delay on the iPad. The sticky cols scroll off, but stick after the scrolling itself has stopped. Any idea how to fix this?

    1. Hi Felix, sorry for such late response, Im in a rush these days. Thats the common problem with “fixed” elements on all mobile and tablet devices. I have not yet found workaround for this.

  16. Hello,
    I would like to commend this plugin. It’s the best thing I could try.

    But yet I may have found a mistake.
    When you load the page in chrome or ios with page after reading a section in a while does not respond. If you turn off all hcSticky plugin is OK.

    It happened to someone you have a bug or somewhere else?

      1. So I afterwards came about.
        There is a problem with the player jwPlayer which is in the same column but not “sticky”
        When jwPlayer off everything works as it should. Sorry for the false alarm but it might help someone else in search of problems :)

  17. srinivas

    floating not working in IE8. Can you please help….?

  18. Philip Espersen

    I found an error with hcSticky, if for instance a sticked element had been removed. In my case i used hcSticky on elements on our website and on an element inside a fancybox object. Once i closed the fancybox, there was an error when scrolling. I found that this piece of code solved the problem.

    if ($this.data(‘hcSticky’) == undefined) return;

    Add it right before: // get referring element

    Thanks for a great plugin, once i got that error i tried numerous other plugins, none came close to what i needed.

    Best, Philip

    1. Can you provide with some test url where I can take a look?

  19. A little stumped. I have a div box I can make float with hcSticky. Works fine, great plugin. I can make the div draggable with jquery ui. But if user drags the div, then scrolls page, div jumps back to its original sticky position.

    How can I somehow update the element position with hcSticky with new position coords from draggable event? The goal is for the element to float wherever the user drags it to. Much thanks!

    1. Thats a nice idea, I haven’t thought of that.

      Currently, that is not possible, but will be in version 1.2 that Im about to (re)write soon.

  20. Hi Zeljko! Great plugin!

    I would like to understand how to use this only for big screens. My site I am coding is using responsive design, and I would like the sticky sidebar to only work when on a desktop. Can you please explain exactly how I get it to only be active on certain screen sizes. I can see the “off” setting, but don’t understand how to implement it properly. Please advise. Thanks!

    1. For example you could do:

          if ($(window).width() >= 1024) {

      That way hcSticky will be turned on only on screens bigger than 1024px. The “off” setting is currently buggy, Im working to fix it for the next release.

      1. Victor

        That will work on 1024×768, but how to make it off on 768×1024 “on the fly” ? When user turning hes tablet’s screen for example.

  21. Cool plugin, just I’ve had some nasty times with a bug when pressing F5 whereas the page is scrolled – the fixed elements gets misplaced( happens on this webpage btw)

    1. Yu

      having the same issue here! any ideas yet??

  22. SV

    Hi, after I called hcsticky on my selector, I noticed that the wrapper is created in the DOM. But then with the wrapper, the attribute on my selector changes to positioned: absolute instead of position: fixed . How do I get my selector to be fixed?

    1. It becomes fixed once you scroll the page and its bottom reaches bottom of the document.

      1. SV

        Hi, thanks for the response. I scrolled down the page, but the selector remains in absolute position to the top of the wrapper. Are there CSS styling that I need to use, or does the plugin automatically do that?

        1. SV

          Never mind; I figured out what the problem was. It appears as though the sidebar needs to span the height of the document (or parent) in order for the “fixed” position to take effect.

  23. Hello!
    Many thanks for the great plugin, while searching the best sticky plugin with most options, this by far was the best. But while using it on many sites, i have found some problems with it.
    Here you can see them: http://dev.lv/stickytest/

    1. Thanx for the report, I will look into it, just don’t kill the link ;)

  24. This is awesome. Thank you for making this plugin.

    We have a special case and would like to hear your thoughts. We are using it already in two sites that use “load more” options for the main content area.

    When we load more items, the plugin as is does not detect that the page has increased in height until we begin scrolling again and an abrupt jump is experienced by the visitor.

    Do you have any suggestions on how to alleviate that?

    1. Hi Rodney, I’ve experienced the same problem on one of my sites. Currently there is no efficient way of doing that, but Im working on a new version of hcSticky that will have this fix.

  25. christian

    hi there,
    this plugin works quite nice, but now i got a problem after an ajax request. its not reinitiate for some reason. any ideas how to solve this issue?

    1. Try using ‘reinit’
      Examle: $('#sidebar').hcSticky('reinit');

  26. Tim


    Please can you put this plugin on Github?


    1. I am overwhelmed by other projects, hoping I’ll put this and one new plugin to the Github.

      1. TIM


  27. Marco Grimaldi

    not work
    and responsive
    if I have col left 100% after i resize in bigger way and col left become 30%. that’s ok but if I resize in smaller way col left is always 30% and doesn’t become 100%

    same problem in the other way 30% to 100% ok ->after -> 100% to 30% not work

  28. I’m pretty new when it comes to working with code, and I’m not quite sure where to go after I click “download plugin.” All it does is open a new tab and all the code is there. I tried saving the code and turning it into a .zip file but WordPress wont take it. Not sure what to do. Thanks for your help!

  29. Max


    Can you tell me if there is an issue with the sticky functionality when you resize the browser window down to a tablet sized (approx 760px wide) in a responsive layout. When I do this the stickyness stops working and requires a page reload.

    Thank you,


  30. Pranav

    Noticed that if iframe code( advert ) is there in content area. There is some conflict of iframe with hcsticky.


    1. I didn’t quite understand your problem, could you be more specific? Thanx

      1. Pranav

        Suppose there is a scrolling div having iframe code in it. As soon as hcsticky js is loaded, the iframe content goes blank. In my case there is an advert iframe in my content(scrolling) div, which loads perfectly.But as hcsticky loads, it goes blank.

        1. HC-Sticky works by wrapping the element with a div, so maybe your iframe has some script that don’t like DOM manipulations on its parents.

          I’ve tested sticky with Google Adsense and Facebook and Twitter widgets that are all iframes, and everything works fine (as you can se on the right sidebar here on this site theres a FB widget).

          1. KANJIZU


          2. Love the plugin, but running into a problem with Google Ads. Checkout simplemost.com and the iframes in the right rail (first position and last) are blank. Any thoughts?

  31. stixxx

    I just update from 1.1.96 to 1.2.2 … so dont work at Safari and iPad (iOS7) :-(

      1. stixxx

        PC Win7 64 – Safari 5.1.7

          1. stixxx

            at PC works your demo fine – the demo site at iPad is “in confusion”

          2. I haven’t got a chance to test it on iPad yet. When I do, I’ll fix it with the next update.

          3. stixxx

            its a good idea to update the touch device support – in this time (V 1.1) fire the scroll event after the “touch scrolling” and not during this – may be, look at http://cubiq.org/iscroll-5 … to update…??

    1. I’ve tested on my IE8 and it worked fine. Could you please use unminified version of sticky and then tell me on what line the error is? Thanks

  32. Gene

    Hi, I’m trying to trigger an div object to fade in when the floating menu reach top. I tried the “onStart” options, but it seems that trigger started after the page is loaded, instead of when the floating menu reach the top. Any Advice?

        $('.project-details-navbar').hcSticky({onStart: triggerK("1start")});
        function onStart(a){
    1. You didn’t use the callback correctly. There are two ways you can use it.

      Via anonymous function:

              onStart: function(){

      Or via run-time function:

              onStart: onStart
          var onStart = function(){
      1. Gene

        Great! thank you very much!

      2. Nouman khan

        Hi I used call back function but nothing happen… I try to show pop to understand if an element reach to its top but no result. Can you help and check my function.

        var st = jQuery.noConflict();

        stickTo: document,
        top: 30,
        wrapperClassName: ‘sidebar-sticky’,
        onStart: onStart
        var onStart = function(){


  33. Gary

    Hi, thanx for this awesome plugin, better than all other I have tested. However, I have little problem, in my column I want to be fixed, there is a document.write (like this :
    ) and it provocates a big bug ! All of my content is removed !! I know document.write is not very cool but it is necessary in my application.
    Can you tell me if there is an issue ?
    Thanx !!!

    1. You are probably using document.write() after the page has been loaded, and that will clear all the content no matter are you using sticky or not. Does your bug happens when you don’t use sticky?

  34. I had the previous version working on my site and it was great! I just downloaded the new version (1.2.3), and it’s now acting strange. My sidebar sticks to the top of the window when I scroll down, which is great. But when I scroll back up, it stays stuck at the top of the window instead of the top of its container. Any ideas?
    responsive: true,
    offResolutions: [-980]


    1. Can you provide me with a link to site, so I can inspect it? Thanks

          1. That did it! Thanks so much! This is an awesome plugin, by the way. Exactly what I was looking for.

  35. Leonardo Cristofani

    First of all, thanks for this great plugin. You’re saved my life with it…. well, almost..lol.

    So, the issue that I’m facing is that I have a sticky column inside an off-canvas menu, and when I toggle the menu visibility (basically change the left position from -220px (hidden) to 0 (visible)), the sticky column inside of it doesn’t change it’s possible with it, it just stays where it is, even if I call ‘reinit’ on it. Have any idea how to fix that?

    Thanks again!

    – Leo

    1. It would be of much help to me if you could provide some demo, thanks.

  36. Libin

    Hcsticky not working in ajax request. its not reinitiate for some reason. any ideas how to solve this issue? I already give $(‘#element’).hcSticky(‘reinit’);

  37. Hi, I`ve installed your plugin on my website (hc-sticky) but I don`t know how to make it work with a “parrent element”. It`s working only “to document” if i set “stickTo:document” . Can you help me please? My website is http://www.cumseface.eu .

  38. Hi, another question, I have some floating like-buttons on my website, I don`t know how can I add shadow to them but only when they are floating..is that possible ? P.S. If I zoom in and out, the floating buttons width is changing and make them shrink. Can this be solved somehow? The CSS for them is this:
    #likebuttons {
    margin-left: 147px;
    width: 350px;
    background: #FFF;
    text-align: center;
    float: left;
    padding: 2px;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px 0px 4px 4px;
    border-radius: 0px 0px 4px 4px;
    z-index: 10;

    1. Solved, changed: width: 350px;
      to: min-width: 350px;
      Now it shows like it should ;).

  39. Hey, so first it’s an awesome plugin and thanks for that!
    I’m using it for two puposes on my website, first one is the #floating-logo on the left – where it works, and it’s awesome..
    second is the #sidebar1 on the right – where it works but every second scroll it will deactivate and every third scroll it will be active back again.
    Any ideas about why it could be?


      1. I downloaded the latest version and i made some css changes for the div where the ad is placed.
        Everything is working fine now, thanks!

  40. Mark

    Dude, great f-ing plugin. Works so well, so smooth. Working in Bootstrap with the “Affix” stuff was a nightmare because I had to fix a navbar at a dynamic distance from the top, and this plugin solved every problem I had. Props to you man, keep up the good work.

  41. Thanks for this great plugin, it works pretty well !
    For my needs, I added a new option : limitPos
    Its the vertical position of the element where the plugin applies sticky behavior (for exemple, with ‘bottom’ option, the window has to reach the bottom of element to stick him).
    Here the code if it’s help someone :

    in options object –> limitPos: ‘top’,

    in onScroll function :

    // top limit inside the element
    var limit_pos = 0;
    if (typeof options.limitPos != 'undefined') {
    	switch(options.limitPos) {
    		case 'top':
    			limit_pos = 0;
    		case 'middle':
    			limit_pos = $this.outerHeight(true) / 2;
    		case 'bottom':
    			limit_pos = $this.outerHeight(true);
    			limit_pos = options.limitPos;

    And replace
    top_limit = $wrapper.offset().top – options.top + top_spacing,
    top_limit = $wrapper.offset().top – options.top + top_spacing + limit_pos,

    Excuse-me for my bad english langage : I’m french ;)


    1. I would really like to see this in action on some page, so I could understand what you tried to accomplish.

      Isn’t the “top” option what you needed?

      1. You’re right : it’s just a shorthand for top option.

        Instead of writing :
        $(‘#myElement’).hcSticky({ top: $(‘#myElement’).outerHeight(true) });
        I write :
        $(‘#myElement’).hcSticky({ limitPos: “bottom” });

        You can see an example in action on the page below (it’s a website for french teachers) :

      2. I wrote wrong : its not a shorthand for top option (I just tested the example above and my header is wrong positioned.
        The option limitPos is the emplacement in the element where the sticky event is triggered.

        1. I’ll test it, so if all goes well I’ll include it in official release. Thanks a lot :)

  42. Jas

    Hi there,

    Great work you have done here! However there is a persistent problem in my implementation of HC-STICKY.

    If you look at my website: http://bit.ly/1j9mvZu , as you are scrolling down, you will see a noticable judder when the sidebar reaches the bottom. The page still works, but it was just that the appearance of the judder that looks rather unappealing.

    Upon inspection I noticed that the judder was produced by the sidebar switching rapidly between position:relative and absolute.

    I can’t figure out what’s exactly causing this and will appreciate your help!


    1. I’ve noticed you are using older version of the plugin. Please try with the latest version.

  43. I have a problem when i add my adsense code in the fixed div.
    In mozilla, chrome and safari sometime the whole div gets fixed and in opera the div doesn’t fix at all.
    I’ve noticed something, when the script doesn’t work correctly, he clones some of my div.

    Here are some pictures:
    -when the script works corectly
    -when the script doesn’t work corectly

    #uvacen is the sticky element

    Pc windows 64

  44. Oh, yes! Awesome! Finally a sticky sidebar that actually works the way it should!

    Gonna try this in the morning and will share my results!



      1. Sorry for all CAPS. didn’t notice my caps lock was stuck on. Thought it was the font in the comment form. lol

        1. Hey there. Thank you for your reply. I actually remove the script and installed a plugin that does the same thing, but also allows accordion widgets, and has an admin panel for wordpress for quick settings to disable the plugin when below specific viewport widths.. But get this, I still see the same bug in Fire Fox as well, so I’m wondering if its a CSS conflict, but I can’t seem to pin point it, yet I’m extremely fluent in CSS.

  45. Great plugin, the best I’ve found. I however run into the problem where the onStart and onStop events are both fired on pageload. I’ve placed an animation in there to hide one div when the sidebar starst to stick, but now it is showing, hiding, showing due to this issue. I’d say those events should not fire at all…

    1. Or perhaps it doesn’t… After restarting my browser it works as expected.

  46. Julieta

    This pluging save my life :D
    It works amazing! I have just one question, i’m using it on this: http://www.capba3.org.ar/2014test/visados_requisitos.html
    The pluging is being used in the calendar at the right. The problem is that when the plugin is active and i resize the window under 768 pixels (offResolutions) the calendar stop moving, but the wrapping div is still active and this div that used to fit all the width of the screen as a responsive div, now mantain a constant proportion. My question is, there is a way to get rid of the plugin effect and also the wrapping div? Thanks in advance for the help and for your amazing work!!!

    P.S: you can see in this link how the calendar div works with the plugin off. http://www.capba3.org.ar/2014test/visados_requisitos2.html

    1. Here is what you need to do, wrap the content of the sidebar to a div, for example .blog-sidebar-wrapper, and call sticky to that element instead of calling it to the sidebar.

      So the point is to control the position and style of the sidebar with css, using media queries, and the sticky will ajust to it.

      1. Julieta

        Hi! Thanks for the answer!! I tried this solution but i still can’t get the div inside the sticky to get it’s full width in window resize, but i discover that in the previous example, and in the one with the changes you suggest me, the callendar recovers the full width if i refresh the page. So i think that the problem is that the plugin isn’t refreshing “in real time” by itself, and it needs browser refresh to show th changes. Is this a moment to use the “reinit” command? How can i use it in my code?

        top: 80,
        bottomEnd: 1300,
        wrapperClassName: 'sticky',

        I updated my example too:
        Thanks in advance for taking care!

          1. You’re missing a > sign where you declared

          2. Julieta

            Thank you very much!!
            I feel a bit dumb about forgetting that “>” but now i know that the way to fix this is with Media Queryes, thanks again for the help and support, your plugin is amazing!

  47. Yu

    Hi there, Amazing plugin, was playing with it for a long time. But recently a serious resposnive issue. I was using Bootstrap 3, everything works perfect untill I resize the window to a smaller (mobile or tablet window size), and refresh the page, then I resize the page back to a bigger window size, the sticky sidebar went off the position it used to be. for instance i always made it right aligned, after resize and refresh it goes 100px left, overlapping with the main content.

    1. Yu

      btw, im using basic call back api, $(document).ready(function($){
      bottom: 36,
      top: 74,
      // if page is reloaded, reinitiate the sticky sidebar

  48. alican

    Very usefull tool, thanks for plugin sir.

  49. Using this awesome plugin, I’ve ran into a bit of a hiccup. The menu on the right, after scrolling to the bottom of the article content, the module just slightly overlaps the content below it. I would rather have some space in between the floating menu and the content below. I don’t think creating a stopping point would work because each page that menu resides is a different size.

    Recommendation? Thank you.

  50. Thank you for this fantastic script!

    Only one thing is not working properly for me: the “offResolutions” option consider the $(window).width() that in most of cases is not equal to media queries viewport width: @media (min-width: XXXpx).

    After a little search i found a way to calculate exactly the same value used in CSS media queries: http://ryanve.com/lab/dimensions/
    But for my project I prefer a lazy small javascript that extract only the media query value (more or less):

    // Get viewport width (x)
    var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName(‘body’)[0], x = w.innerWidth || e.clientWidth || g.clientWidth;

    With this value I can turn ‘on’ or ‘off’ the sticky bar, depending on the exact media query value:

    if (x >= 992) {
    try {
    catch (err) {
    $(‘#sidebar’).hcSticky({ bottom: 40, responsive: false });
    else {

    Nice work, thanks again.

  51. Hello there,
    thank you very much!
    I searched a lot a plugin like this.
    I installed it on my wordpress site:
    While on chrome and IE it displays perfectly, I have some problems on firefox. How coudl I fix it?

  52. This is great. I was able to create a nav that sticks on top when the page is scroll down to its level, but could anyone give a short example on how to make a nav sticky to windows bottom and then ticky on the windows top when user scroll down? thanks

  53. Great tut, thank you for the information. I want to ask you if I can configure the parent element that the the sticky sidebar is referring to.

  54. Well. there’s only one word to say: THANKS! This piece of code is awesome. It’s rich of options and simple, powerful and effective at the same time.

  55. Hi,

    I’m working on new responsive design for my blog. I’ve tried some plugins to do what yours do. I had some bugs. Yours is the one that worked perfectly even if i resize the window (responsive). Some others did not replaced the width and the div correctly.

    Thanks for your works.

  56. Micha

    I came across a weird bug: in a floated grid, Safari/Mac refuses to add the sticky-active class. Works fine everywhere else, fine in Safari/iOS, just WebKit/Mac doesn’t want to play as soon as I add float: left; to my columns.

    I’m using a template based on the HTML5 Boilerplate, but I’ve made some changes: that means I’m running reset styles loosely based on Normalize.css, and I’m including Modernizr and Respond.js.

    I haven’t tracked it down yet, but I’ve noticed that things start working when I remove either my reset styles, or Modernizr/Respond.js (or both). Will report back when I’ve (hopefully) found out what it is exactly – might not be a “bug”, but a weird conflict elsewhere.

    For now, if anyone bumps into this and runs a similar configuration, these seem to be the places to look: check reset styles and/or Modernizr/Respond. Hope it saves people some time.

  57. loparr

    Hi, plugin works good on all browsers except IE8. I have a long page and right sidebar is maybe 1/4 of it . When I reach bottom of sidebar, the sidebar jumps out of position to the left and covers page content. When I scroll a bit up, sidebar jumps to place but after it reaches its top, it jumps again to the left and covers content. In IE9 everything works fine. What can be done about this? Thank you.

  58. Tamara

    the sticky bar won’t work if I have any meteo widget (I’ve tried many) inside the sidebar.

    Météo Rabat © meteocity.com

    thank you

    1. Tamara

      sorry, it seems my choise of widget causes the problem, I will look for others.
      thank you

  59. hi! great work! I’ve got a issue after an ajax call (masonry + infinite scroll). you can take a look at the site in http://beta.comcar.it
    thanks a lot!

    1. Try adding stickTo argument like this:

          responsive: true,
          stickTo: document
        1. I’ll release a new version in a few days. This issue should be resolved.

  60. Does this work on mobile? It’s difficult to test because of your examples page setup. Thanks!

  61. Andrew

    We’ve been trying to get your excellent plugin working with Adobe Edge Animate. Which works really well with Firefox IE and Opera. But in Chrome and Safari our box (which we want to stick to the top of the page) jumps slightly to the right and doesn’t stick. Safari and Chrome fail in exactly the same way. It’s almost as though jquery is failing to load properly but all tests and debugging says it’s loading fine. We wondered if it was the windows onload function that might be the trouble. Everything we’ve googled hasn’t helped and we are in the dark.

  62. I use your hc-sticky plugin at my site and it generally works very well on various platforms. However, when I visit the website using an iPhone 6 and Safari mobile in portrait mode, the navigation menu gradually disappears into the top of the viewport as you scroll down the page and is eventually completely hidden. This does not happen when using the Chrome browser (on that same phone) or when using Safari mobile in landscape mode. In essence, it appears to be a device-and-browser specific issue. Any help would be appreciated. Thanks.

  63. Hey!
    Man, this is one awesome plugin. A big thank you for providing it!

    I have one issue that I’m not sure how to solve, and if it’s even possible?

    On the articles of my site (linked in my name), I use HC-Sticky on the ad on the right (only shows up on desktop).

    Works really great, when the ad comes into view, it get’s fixed.

    But: Before the ad I’m showing some related articles. What I would like to do, is make the ad come first, and the related articles after.

    The way I’m trying to achieve:

    Let the ad be sticky all the way until the related articles are pushed to the bottom of the article container, then remove the sticky function.

    Is this even possible?

    Thanks again!

    // Jens.

  64. Kat

    Hi there! Great plugin!
    I am trying to achieve the same thing you’re doing in this page with the floating menu in one of my pages, but I can’t get it to work.
    I have uploaded our file, I am calling the method (I have included ‘stickTo: ‘.post-content”). Everything is in order and I don’t see any errors, but it’s not working. It won’t assign css changes to my content.
    Any ideas?

  65. […] in order to stick the sidebar and at the same time make it scrollable I used HC-sticky (git hub fork). This script is one of the few that I found scrollable when the sidebar height is […]

  66. Umesh


    check out this link sidebar is not working perfeclty it not scroll with content properly.

  67. Greg

    Great plugin, thanks!

  68. Tom

    When I add padding or margin to the top of an element inside the sidebar, the scroll adds extra space after the sidebar on the bottom. Is there a trick to fix that?

    1. Tom

      Nevermind. It was my CSS.

  69. Love the plugin but having one issue. My google ads are not showing in the right sidebar (there are two ad units that should be shown). When I disable the plugin they then load consistenty but when I have HC-Sticky on they sporadically load. Any thoughts. You can see an example at http://www.simplemost.com/7-awesome-kitchen-hacks/

    Thanks in advance,

  70. i have connected he script to site, it is all ok, script creates wrapper-sticky by default, but… nothing happens – nothing becomes sticky. Would you please, help me?

  71. Hi SWG,

    I love HC-Sticky. I’m using it on one my sites to make an Optin-Box in the Sidebar sticky.

    There is one little thing bugging me still. I can’t get the “stickTo:” to work like i’d want it to.

    The Problem is, that there is dynamic content above the sticky-element in the sidebar, so the element goes further down, because I use the height of the article-content as the “stickTo”.

    Is there a way to tell the “stickTo” to take the element-height of the article content, subtract the height of the sidebar and add the height of the sticky-element again?

    Like this (though this doesn’t work):
    $.stickHeight = $(‘#content-inner’).height() – $(‘#sidebar’).height() + $(‘#sticky-element’);

    A few bucks via PayPal for whoever can help with this :)



  72. Supersix

    Works like a breeze, tried many before but this works by just loading it & using desired element to it. Thanks a ton. Fullfills my requirement.

  73. not mobile compatible , how do I do it?

  74. Hello, I made a very small test of hcsticky on the provided url (pouzzler.free.fr/hcsticky). It doesn’t work at all under Opera 12.17, Firefox 43.0.1, and stops working on Chrome and IE when reaching the bottom (i.e. the content is preserved while scrolling…. up to the last few centimeters of scroll, where it disappears anyways).

  75. Thank a ton! It saved me a alot of time. Very handy plugin.

  76. We tried a few other similar scripts, but none of them worked for what we needed, but hcsticky.js seems to do the trick!

    1. same, spent a few hours trying to figure out like 5 other examples around the web , found this and in 2 minutes had it working properly, thanks!

    2. Same here, tried some plugins before this with no success… but just used it without any settings and walla!!

  77. Alex

    Thanks for the plugin. Very nice job.


    Still develop this plugin? It have many problem with iframe. I still waiting you to fix it.

  79. How can we define dynamic height top to bottom while scrolling .

  80. Akash

    BBBBBBBIIIGGGGG thank you …..ii

Leave a Reply

Your email address will not be published. Required fields are marked *