1. Wow man! Was desperately searching for something like this. Hope that I had found this earlier.

    Anyways, thanks for the great plugin.

  2. 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!

  3. Hello, and thanks for this great plugin!

    It works great on the blog I’m putting together, except for the fact that when scrolling down the sticky often flickers a lot, and I haven’t been able to nail down the cause with 100% clarity. For starters, it occurs when inserting PNGs and SVGs — sometimes. I had one PNG and it worked fine. But then I added two SVGs and it started flickering like crazy. I tried changing the two SVGs to PNGs, but the flickering persisted. I tried scaling down the sizes of the SVGs/PNGs (as a test), but the flickering still persisted.

    When I extensively played around with the widths of the images I was able to get the flickering to disappear on Firefox (57.0.4, Windows 7), but when I then tried things out on Chrome (63.0.3239.132, Windows 7) the flickering was present. So I played around a whole lot more with the image widths and finally got the sticky to not flicker on either Firefox or Chrome, but when I then tried it out on my laptop (smaller monitor/viewport, Firefox 57.04, Linux distro) the flickering was present. I played around with the image widths again and was able to fix the flickering on the Linux laptop, but when I tested again on the Windows 7 desktop it was fine with Firefox but it flickered with Chrome.

    To be fair I don’t even know if this is an issue with HC-Sticky, but thought I’d check, just in case. I’ve otherwise got a completely vanilla install, and the only thing I’ve changed with the coding are the classes for the sticky and container.


      1. Certainly! The in-development blog is behind a password though, so I’ve sent an email with the password and some more details to the email address found at the bottom of Some Web Media.

      2. chirag

        is There HCsticky compatible with jquery 3? also the new HCSticky plugin when i add it somehow the jquery stops working .

  4. Max


    Which browsers are supported in latest version?

  5. It dows look promising, but I am facing the problem that the ‘sticky’ element keeps jumping, once its bottom reaches the bottom of the container – and i have no idea how to fix this.

    I did try to remove to-margin and I also added following parameters:

    top: 0,
    bottom: 0,
    bottomEnd: 0,
    wrapperClassName: ‘entry-content’

    But still the element keeps jumping. What I mean with ‘jumping’ is that is doesn’t really stick to the bottom. Instead the element moves about 60–80 pixels up before it jumps back down to the bottom. Does anybody have any suggestions on how to fix this issue? Thank you very much!

  6. saisudhakar

    When i was see the demonstration it working good,but i am adding this plugin in my site it is not work properly,can anybody help me.How can i use this plugin.

    Thanks in advance.

  7. Nam MA

    Awesome! Perfect!
    This is the best sticky plugin i have ever used!

    May you update it to be compatible with jquery^3?
    I can only use hcSticky with jQuery^2 by now.

    Thank you very much! :D

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

  9. Very cool plugin. Thanks

  10. evgeny

    Thank You for this plugin. It works and makes what i want. Thanks!!!

  11. fix for mobile and tablets is in pull request, i changed some lines of code.

  12. gabi

    Thank you for making this plugin!

    Is there a way to only use a sticky column on a desktop?
    I have tried this code, but it doesn’t seem to work.

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

    1. ali

      top: 100
      //bottomEnd: 100,
      //wrapperClassName: ‘sidebar-sticky’

  13. Akash

    BBBBBBBIIIGGGGG thank you …..ii

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


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

  16. Alex

    Thanks for the plugin. Very nice job.

  17. 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!!

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

  19. 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).

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

  21. 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.

  22. 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 :)



  23. 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?

  24. 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,

  25. 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.

  26. Greg

    Great plugin, thanks!

  27. Umesh


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

  28. 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?

  29. 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.

  30. 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.

  31. 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.

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

  33. 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.

  34. 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

  35. 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.

  36. 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.

  37. 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.

  38. 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.

  39. 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.

  40. 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

  41. 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?

  42. 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.

  43. 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.

  44. alican

    Very usefull tool, thanks for plugin sir.

  45. 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

  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. 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.

  48. 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.

  49. 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

  50. 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.

  51. 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 :)

  52. 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.

      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!

  53. 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?


  54. 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 ;).

  55. 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 .

  56. 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’);

  57. 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.

  58. 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.

  59. 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?

  60. 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(){


    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

  61. 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…??

  62. 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?

  63. 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,


  64. 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!

  65. 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

  66. 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


  67. 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');

  68. 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.

  69. 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 ;)

  70. 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.

  71. 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??

  72. 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.

  73. 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.

  74. 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?

  75. srinivas

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

  76. 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 :)

  77. 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.

    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

  78. 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!

  79. 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.

  80. 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.

  81. 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?

  82. 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?

  83. 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 ;)

  84. 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!

  85. 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

  86. 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.

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

  88. 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?


  89. 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 !

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

  91. 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 :)

Leave a Reply

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