somewebmedia / hc-sticky Goto Github PK
View Code? Open in Web Editor NEWJavaScript library that makes any element on your page visible while you scroll.
Home Page: https://somewebmedia.github.io/hc-sticky/
License: MIT License
JavaScript library that makes any element on your page visible while you scroll.
Home Page: https://somewebmedia.github.io/hc-sticky/
License: MIT License
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:
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:
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:
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
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);
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.