somewebmedia / hc-sticky Goto Github PK

it would be great to add delay when element is floating.

The sticky works just fine with text, JPGs and PNGs, but as soon as I insert some SVGs the HC-Sticky sidebar starts flickering/bouncing on the scroll down. Firefox 57.04 and Chrome 63.0.3239.132.

Hi, I just wanted to let you know that when hc-sticky.js is included in a page where the plug-in Chosen is used, Chosen breaks.

You can see it in the following fiddle: http://jsfiddle.net/q37k614d/

If you remove hc-sticky.js and run it again, you’ll see that the multiple select element renders properly.

I try setimeout to update top value from 10 to 30. But it cannot work ???
Demo: http://noibatdau.com/demo/Fix/demo_1.html

when scrolling down, at some point, a from the bottom of the sidebar will not show for a second - and when scrolling more down it will show again.

any ideas?

I have a page with an element that is supposed to be sticky when scrolling down. The element is tall and when the viewport is shorter than the element and you scroll down its fine until you scroll to the bottom of the stuck element. At this point if you continue scrolling down the page the stuck element rapidly turns on and off the "sticky-active" and "sticky" selectors causing the element to jump up and down by about 10 or so pixels rapidly. It looks bad and I can't figure out how to make it not do this. Any thoughts?

Please, give an examples what should the object look like

When hcSticky() is applied to absolutely positioned elements, the layout breaks.

Refer to below example:
http://jsfiddle.net/kleptomac/ju5esLh8/

The sidebar on the right is pushed out of the window when hcSticky() is applied. Commenting out the JS renders the sidebar in the correct position.

Expected behavior:
The default layout should not break when hcSticky() is applied to an element.

I'm using this on a long, mobile-only menu that gets cut off at the bottom when I scroll. As of right now, this is all I'm using:
$('#my-element-here').hcSticky({
stickTo: '#content'
});

Do I need to enable/disable something to allow the menu to be scrollable when it is taller than the viewport? I thought followScroll being true by default would allow for this.

I've updated on HC-Sticky 2.1.3.
But in HC-Sticky 2.1.3 the divs (any sticked object) start dont stick in IE11.
There is not such problem in v2.1.1
What happened?

How to resolve this error?

jQuery 3.2.1

Element is have height.

I have two stick elements on one page.

One when scroll the class .sticky is added but on other element it isn't.

And idea?

Hi!
I had to use the script in the <ul> sidebar on the last <li> element. For some reason, the created div Spacer does not copy the list-style-type attribute value from <li> and shown as a default list item with disk. Please add to the Spacer some class name, in order to be able fix directly any such special occasions.

Thank you! Great script!

Hello,

I have a navigation bar/header to which I applied this code:

jQuery(document).ready(function($){
            $('.header-cont').hcSticky({
                innerTop: 63,
            });
        });

It works fine, but it disappears after scrolling for a while. You can view it here http://arjjuna.github.io/mysite/

What could be the issue?

Thanks

Thanks for the plug-in, it's great.

I have a small issue in IE8. The div I am applying hc-sticky to is "float: left;".
The float attribute is not being added to the inline styles of "wrapper-sticky".
All the other attributes are being added in IE8.
The float attribute is being added in all other browsers I've tested.

Any ideas what could be causing that?

Hello,
when i hit F5 the sticky element doesn't jumps back.
you can add this after line 469:

if ($this.hasClass(options.className)) {
$this.css('position', 'fixed');
}

RE: http://someweblog.com/hcsticky-jquery-floating-sticky-plugin/#div-comment-14461 (for some reason your webhost firewall has decided to block me for trying to submit this as a comment)

I've been battling this same thing for the past week. I think I have found the problem as well as a partial solution.

The basic issue is that ALL iframes don't "like" DOM manipulations, if an iframe is inside a node that is removed, moved or detached, the iframe will be forced to reload. In some cases where google uses a default state of an empty iframe to write content into later this will result in the iframe being reloaded to empty content.

The fix is to avoid removing or detaching the container holding the iframes, this is not the default case for hcSticky. To fix the issue you will need to add an extra container around your content and prevent the insertion of the wrapper by adding it into your HTML.

essentially I had to convert this:

<div class="sidebar">
  content
</div>
<script>jQuery('.sidebar').hcSticky();</script>

into this:

<div class="sidebar wrapper-sticky">
  <div class="stick-me">
    content
  </div>
</div>
<script>jQuery('.sidebar .stick-me').hcSticky();</script>

Hope this helps.

Obviously this is only one way of doing it, based on the available configurations for hcSticky there are many other ways of handling this, but it boils down to preventing the automatic insertion of the wrapper by hcSticky.

HC-Sticky is the best sticky plugin I’ve tried (and I’ve tried a few, believe me!) and it’s used in the Gene Expression Atlas. We modified it to use it with our Node.js stack. Due to the lack of updates for almost a year, I’ve created a fork of HC-Sticky to use with Node.js. It’s in a very early yet functional state. If you want to have a look at it, go to https://github.com/alfonsomunozpomer/hc-sticky. Suggestions and bug fixes are all welcome!

When you resize the window with a hcSticky containing radio buttons, the checked property is lost (they become un-checked again). Turning the "responsive" option off fixes this, but causes many more issues as the page is responsive.

Thanks

The plugin work only with jquery lib <= 1.8.3

When we create a sticky element that is larger than the browser viewport size and in Chrome the screen is either zoomed in or out (ie: view the page at 90% or 110% etc) any sticky elements flicker and bounce when scrolling down - this does not happen when the screen is set to 100%. We've also seen this occur on a high-resolution screen on a Microsoft Surface Pro, where Windows 10 is set to magnify everything in the display settings.

You can see this behaviour here: https://youtu.be/dGgC_ekp6_Y

It appears that the element is bouncing back and forth between position:fixed and position:absolute as you scroll down. You can see this here: https://youtu.be/DIoansfdSe8

We've seen this behaviour in Chrome on Mac/Linux and Windows. The version of Chrome in the videos is 67.0.3396.99.

Please let me know if there are any more details I can provide.

It would be really useful a Changelog and an updated documentation. I've lost hours to put some light on "stickTo" and "noContainer" options (obviously I am not so confident with Javascript). Finally I've understood that I needed last version to make "stickTo" work and that "noContainer" option has been deprecated instead ;)

Cheers,
-P

Hi thanks for the awesome plugin, I recently implemented it in my project and it comes out with a little issues.
It seems everytime I resize the browser window. the sticky sidebar will just stick to its old position. I have to manually refresh it, then those sidebar will go back to where is belong.
Same thing with the webpage's responsiveness.
I hope i describe the question in a proper way.
thanks

Hello.

The desktop design top: is 50, tablet or mobile version is 100.

I cannot off/destroy or anything.

sticky_menu_top = $('.navbar').height();
$('.page-sidebar').hcSticky({
    bottom: 0,
    bottomEnd: 8,
    top: sticky_menu_top,
});
$(window).on('resize', function() {
    sticky_menu_top = $('.navbar').height();
    //$('.page-sidebar').hcSticky('stop');
    $('.page-sidebar').hcSticky('destroy'); 
});

This is error in browser console.

TypeError: e(...).data(...) is undefined

I cannot off or destroy it. So, I cannot make sure that how do i change top offset in each window size.

Hi!
I'm using your plugin on one of my sites, and I'm very happy with it, except for one thing that I'm not able to resolve:

It seems it calculates the height wrong.

You can see it in action here, with the ad on the right:

http://delbart.se/saab-blocket/

When the white are ends, the sticky item is supposed to stop, but it keeps on for a couple of hundred pixels.

Any idea what might be wrong?

Is it possible for some tags to be created for the various versions of the plugin? That way as a consumer I know what the source of truth is for a given version.

I am having trouble understanding how I can disable this plugin for mobile and tablet users. at the moment I've tried using the destroy and the onresize options but I am obviously doing something wrong. Can anyone direct me on how these are supposed to be combined so I can create the state change I need?

$(document).ready(function(){
  $("[data-sticky_column_1]").hcSticky({
    stickTo: "[data-sticky_parent_1]",
    onResize: function () {
      console.log(arguments);
    }
  });

Thanks!

Hey there,

Trying to run the reinit method but can't understand how it works. Could you please look at this non-working pen and if possible point out what's wrong with it? The console always says reinit is not a function

https://codepen.io/anon/pen/xzavRw?editors=1111

Thanks in advance

When calling hcSticky('destroy'), the resize_timeout should be cleared, because otherwise after at most a 100ms any subsequent change to the stickied element css-left will be overwritten by the scheduled call to setLeft()

Hi folks,

Thanks for plugin!
I found some bug in hcSticky.
How to reproduce:

• add hcSticky for some container
• hide container
• resize browser window

you will see error in console
"Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null"
This is cause of offsetParent of hidden element is null
It happens here
https://github.com/somewebmedia/hc-sticky/blob/master/src/hc-sticky.helpers.js#L202

Could you consider this?
Tnx.

After fire the destroy command, the sidebar still has the inline css styles:

width: 100px;
top: 0px;
bottom: 0px;
left: 0px;
right: 717px;
position: absolute;

This should be removed also?

I need add class to body when element is sticky.

this is possible?

thanks

Hi, I have included this script in WordPress.
But I have this error: Uncaught TypeError: Cannot read property 'queries' of undefined

I used the default jQuery version bundled with WordPress 4.9.8

Image Reference: https://cl.ly/195da84f9347

Hi,

Nice job on version 2!

It mentions in brackets for stickTo, (parent element), however is errors, if nothing is set.

Cannot read property 'indexOf' of undefined

It works ok, if stickTo is not set and top is explicily set to 0, even though it is in the defaults.

Thanks,
Tom

I am sorry, have a little problem in using github.

On resizing it's going up and down 1-2px; it irritated me and I found the problem.
But here is a little fix:

$resize_clone = $this.clone().attr('style', '').css({
visibility: 'hidden',
height: 0,
overflow: 'hidden',
paddingTop: 0,
paddingBottom: 0,
marginTop: 0,
marginBottom: 0
});

should be like this

$resize_clone = $this.clone().attr('style', '').css({
visibility: 'hidden',
height: 0,
overflow: 'hidden',
paddingTop: 0,
paddingBottom: 0,
borderTop: 0,
borderBottom: 0,
marginTop: 0,
marginBottom: 0
});

$('.element').hcSticky('on') cannot recover from 'off', 'stop' or 'offResolutions'

I'm using Version: 1.2.43 of hc-sticky. It works perfectly on all of the other browsers I've tested it on, however using the android default browser (I'm using phonegap build) the header jumps down ever so slightly if the user scrolls too early. If the user waits 2 seconds or so it doesn't jump and acts as expected. If you have any recommendations to prevent this jump or require and further information please let me know.

This can be seen on this simple codepen example: http://codepen.io/anon/pen/xwMKWo

overflow hidden is pretty common for paralax header and some other effects. Suggestions?

Sorry !!!

Two issues occur when height of sticked div is bigger than height of the screen:

• When moving screen too fast or when browser is lagging vertical position of sticked block div get out of sync.
• When it's happens spacer start to overlap sticked div and it's impossible to click on any controls covered by spacer. This can be bypassed by adding z-index: -1 for spacer, but I not sure if it's good idea.

I find that issue while trying to use HC-Sticky on this website. If you play with browser window size (it's happen more often on small resolutions) and try to scroll page down and up left panel with filters will sometimes end up too low or too high relatively to the div it's sticked to.

It's harder to reproduce bug on lightweight page, but still possible so I made standalone reproduction. Yet in this case block could only end up too low, but it's never end up covering header:
https://jsfiddle.net/ArseniyShestakov/3ypjufuL/

Reproduction:

1. Open the page.
2. Scroll it down. Make sure you get to the end of sticked block and then little bit more so HC-sticky start working.
3. Now drag scroll bar rapidly to get on top of the page.
4. In many cases you'll end up with left sticked block being too low and checkboxes will be inaccessible because they overlapped by spacer.

Tested in both latest stable Firefox and Chromium.

Looks like a great library! I wanted to see it work, but the demo's host account is suspended....

Are you able to update this project to enable Bower support?

I try use otpion 'stickTo' with object jquery, but it can't work

Code: http://prntscr.com/j8goxj
Error: http://prntscr.com/j8gp36

I'm not sure what's going on here, but given a two column layout, using flex box, the side column (which has hc-sticky applied) is getting it's width reset incorrectly.

Not much to go on, I know, but any ideas of where to start looking? What can I give you to help debug?

HC-Sticky doesn't work on jQuery 3.

TypeError: a.indexOf is not a function

When I have used this hc-sticky in google blogger, I am facing issue when scrolling. Please refer below image

I'm using followScroll:false on my initial call. Later (on resize), I try calling any of the commands (stop, off,on,destroy,reinit) and hc-sticky errors out with this:

TypeError: $(...).data(...) is undefined
$(this).data(pluginName).commands[userOptions].call(this);