rgalus / sticky-js Goto Github PK
View Code? Open in Web Editor NEWLibrary for sticky elements written in vanilla javascript
Home Page: https://rgalus.github.io/sticky-js/
License: MIT License
Library for sticky elements written in vanilla javascript
Home Page: https://rgalus.github.io/sticky-js/
License: MIT License
I'm not sure if this is a feature or a bug, but I'd like to disable or at least fine tune it. Even on your demo page this occurs. As I scroll down the page the element will eventually unsticky itself and get scrolled away. Inspecting the element shows me that the top
attribute will hold steady as I scroll down but then suddenly drop and keep dropping past zero into negative values the further I scroll.
Scroll down slowly to see the effect.
I'm using Ember.js and instantiating a Sticky object in a component lifecycle hook that is fired after the element is inserted in the DOM. I'm not getting any sticky behavior though and the marginTop
option seems to drive whether the element has position fixed and is super sensitive (if the value is less than a certain amount the stickiness is never activated.
Do you or anyone have an example of using this library with a JS framework or library like Ember.js or React?
Would be nice to be able to specify what element to stick to :)
IE11 gives SCRIPT1002 where the sticky class is iniatiated
Sticky navbar not activates on first time, only activates after resize events. But when i calling this.onResizeEvents(element) manually in renderElement function, it seems working.
Seems like none of the attribute values get updated on resize when using the sticky-wrap option. This makes it impossible to use on responsive websites.
Also, attributes are duplicated on original element and sticky-wrap element - is this intentional?
I am noticing an issue with the width/height calculation for container elements and how it translates to the static width after becoming sticky.
If the container element has padding the sticky element is still set to the full width of the element. This causes layout issues for the sticky element.
Could you update your plugin to at least have the following calculation be an option?
var styles = window.getComputedStyle(element);
var padding = parseFloat(styles.paddingLeft) +
parseFloat(styles.paddingRight);
return element.clientWidth - padding;
}```
Thanks.
I have a weird one, but I'm sure it's common problem.
I have a bar that becomes sticky at a sticky point, the problem is that my bar has a 15px lower margin. When the element becomes stuck, and parent container doesn't take on that margin, so the margin is lost (causing lower elements to move up the 15px lost).
I've hacked around this by manually adding a class to the parent after the sticky() is initialised. Another work around is to add the margin to the element below the sticky bar, but that causes other issues.
Would it be possible to able to a class to the containing element when it's created?
Hi there, great library. Thanks for it!!
Sticky-js is implemented, but when I scroll down the page the right element (description) shoots up 10 pixels or so, and then doesn't scroll down with the user.
I've implemented the library into a Shopify store located here -
https://insight-ultrasound.myshopify.com/products/convex
Here is a basic mockup of the page container -
<div class="grid product-single" data-sticky-container>
<!-- IMAGE STUFF IS HERE, it should stay put -->
<div class="grid__item desktop--one-half product-single__photos">
</div>
<!-- I WANT THIS TO SCROLL DOWN WITH THE PAGE -->
<div class="grid__item desktop--one-half" data-sticky>
<div class="product-single__meta">
<p> Lorem ipsum </p>
</div>
</div>
</div>
Essentially the page is in 2 columns.
Left side is product photos, right side is product description. I want the description to scroll down with the user.
Any ideas here? I think it must be the container and parent vs child layout of my page, but I've tried a few different configurations and can't get it to work.
Thanks so much!
Hey there. I didn't find any way to solve this problem (recognizing the element sticky status, if it's sticky or not). I did a minor change in the code to add a class when the element is sticky ('.sticky-active') or not.
Lines 253 to 262 in 0a0dca4
It's easy to workaround that (by setting top:1px; position:relative;
) but i don't see the point of that use case. Is it possible to remove it ?
I like this library, but it would be great if there is a CDN link provided. :)
Hello @rgalus!
I have a problem in Safari 11.0.3 (macOS 10.13.3):
HTML (I'm using Bulma CSS Framework 0.6.2
):
<div class="columns">
<div class="column">
<!-- my content here -->
</div>
<div class="column is-4" data-sticky-container>
<div class="sticky-block" data-margin-top="20">
<div class="sticky-block__inner">
<!-- my sidebar here -->
</div>
</div>
</div>
</div>
JavaScript (packed via Webpack 3.10
):
import Sticky from 'sticky-js'
const sticky = new Sticky('.sticky-block')
I don't know why, but this lags/jumps only in Safari when I scroll page via touchpad (MacBook Pro 2015). I already tested in latest FireFox, Chrome and MS Edge (Windows 10) β everything is okay.
Also, data-sticky-wrap
option doesn't work on my case.
Would be great to solve this problem or get understand why it makes! π
I've just found this plugin and immediately liked it (maybe because of its similarity to foundation π)
However when seeing all the open PRs (some almost 3 years old) I'm wondering if this project is still maintained.
@rgalus do you have plans to continue working on this?
There's a typo causing stickyFor to malfunction:
sticky-js/dist/sticky.compile.js
Line 38 in 891593b
There is need to have event hooks for when the sticky class is added and when it is removed
It is possible to dynamically change the height of the sticky element, please? If I change the height, it overflows the wrapper.
I've noticed that removeStyle() doesn't remove the position property in IE 11 - 9.
I've only tested this lightly, but the following seems to work.
removeStyle: function removeStyle(el, properties) {
this.iterate(properties, function (property) {
if (property === 'position') {
return el.style[property] = '';
} else {
return el.style[property] = null;
}
});
},
The features list for the plugin has the following line:
It can be sticky to the entire page or to selected parent container
However, I cannot seem to find any documentation that states how to define the selected parent container when instantiating the stickyjs instance.
A pointer in the right direction would be appreciated!
Hi there, finally got this working.
Is there any way I could do something like Sticky-kit's 'stick_in_parent()' function?
'Sticky elements taller than the viewport can scroll independently up and down, meaning you donβt have to worry about your content being cut off should the sticky element be too tall or the userβs resolution too small.'
Can be seen about halfway down the page here - http://leafo.net/sticky-kit/
I've got a sticky section on my page, but if the height is too large it won't scroll at all. Client really wants this. Any ideas?
Hello! Thanks for a good piece of functionality.
I add it via requrejs main config like this:
require.config({
paths: {
'sticky': '../../node_modules/sticky-js/dist/sticky.compile', // sticky menus etc.
}
});
And it breaks at the RequreJS module wrapping stage with the following browser console error stack:
Uncaught TypeError: Cannot call a class as a function
at _classCallCheck (script.js:4235)
at Sticky (script.js:4259)
at main (script.js:2679)
at callDep (script.js:2537)
at main (script.js:2670)
at callDep (script.js:2537)
at main (script.js:2670)
at callDep (script.js:2537)
at main (script.js:2670)
at callDep (script.js:2537)
Can you check if it is possible to make it work?
Thanks.
Val
I would like to add a class onto the item when it is stuck. Can you think of a way or maybe add a class when it is active?
For some reason my .sticky don't stop when it approaches the end of the section, it overlays the footer instead.
Am I doing something wrong? as it should do that automatically.
With a 100% width element (menu bar) when on a mobile device, if you rotate the screen the menu bar stays the same width as before the window resize. Also if resizing a window on desktop same issue.
Is there a way to recalculate the width or set it to be always 100%?
Thanks much
I'm trying to import sticky-js as an ES6 module.
import Sticky from 'sticky-js';
var sticky = new Sticky('.foo');
but it doesn't work. Any suggestions?
Hi, I noticed that sticky-js doesn't work when it is in a container with overflow-y: auto
.
Codepen here: https://codepen.io/acespace90/pen/XwMGqe
Any suggestions?
Hi,
I Like your plugin a lot. jQuery-free single purpose libs are my favorite :)
I am using bootstrap 4 alpha 4 with a simple dropdown in a sticky div
and as long as the div is not-stickified (no scrolling done yet) there seems
to be some z-index problem. that can be pointed down to this style which is added to the div.
transform: translate3d(0px, 0px, 0px);
Once I remove that manually the overlay problem seems fine. Don't know if that has some purpose.
Here is what the problem looks like:
I tried setting z-index
on the sticky container with no luck.
Could I somehow fix this with some workaround?
thx
I found memory leaks related to bounded this in event listeners attached to window.
PR: #59
$(window).on('load ready resize', function () {
sticky = new Sticky('#sticker');
});
Go to https://rgalus.github.io/sticky-js/ and scroll down so that the sticky elements are triggered.
Refresh so that the browser has the position as before and see that the sticky elements are not sticky.
Is there a fast solution?
i need a clear example with options to see the syntax..
Hello,
I want to use your library with basicScroll.
I need a way to know when sticky-js is ready ? Is this ever possible or do you plan on adding a ready callback ?
Thanks
I'm showing / hiding a sidebar that I've made sticky. It initializes ok and is sticky, when I resize the window and hide the sidebar β then resize the window bigger again, the sidebar breaks and is no longer sticky. Using stickyFor
does not make it work (does not recreate it)
Thanks for the amazing plugin!
Any chance of updating this with the Intersection Observer vs. window scroll event in the future?
Thanks!
When we use the function Destroy() the wrap (span) is not removed and another wrap (span) is added when I call it
In the demo file, I found this code:
var sticky = new Sticky('[data-sticky]', {});
I assume the options go in between the curly braces {}, but i'm not sure how to get the options to work.
Example that does not work:
var sticky = new Sticky('[data-sticky]', { "data-sticky-wrap": true, "data-sticky-for": 960, "data-margin-top": 300 });
Adding or removing quotes around the option names won't work.
Thanks
First of all, great library, thanks for your work!
There is one thing that is missing IMHO - a method for destroying the sticky element. What I mean by that is removing all listeners. This is very useful for SPA. I use it in Angular 1 for example.
For people that needs workaround right now:
Let's say you still have the reference to the DOM element (element
) so all you need to do is:
window.removeEventListener('scroll', element.sticky.scrollListener);
window.removeEventListener('resize', element.sticky.resizeListener);
Hi, first of all thanks for creating a such good tool!
I'm working on a project with vue.js and im using your library. but i want to follow the good principles and use your lib as a directive, the problem now is that vue directives functions receive the elements as an HtmlElement object and the Sticky constructor only accepts element selector.
Is there a way of doing it? I cant figure it out
Sticky.prototype.destroy = function destroy() {
var _this6 = this;
this.forEach(this.elements, function (element) {
_this6.destroyResizeEvents(element);
_this6.destroyScrollEvents(element);
if(element.dataset.stickyWrap){
element.parentNode.parentNode.insertBefore(element,element.parentNode);
element.parentNode.removeChild(element.nextSibling);
}
element.removeAttribute('style');
delete element.sticky;
});
};
I have this
var Sticky = require('sticky-js');
var sticky = new Sticky('.sticky-item');
And it worked before updating but now it's throwing Cannot call a class as a function
via sticky-compile.js
function Sticky() {
var selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
_classCallCheck(this, Sticky); <-- line
Hello,
I think a good test case is better than any explanation:
https://jsbin.com/cetopukadu/edit?html,css,js,console,output
Any ideas how to fix that?
Thanks!
Hi,
I just started using sticky-js and noticed a trouble on both Chrome and Edge.
When my list of inline-blocks, containing text and with a floating point width (e.g. 873.45px) is read in getRectangle, it's floored (873px), pushing my last block on a new line.
Looks like that element.offsetWidth element.clientWidth, element.scrollWidth are floored.
It would be great if you could allow the update/change of the margin top position. I have a sticky element that needs to stick to a header, but this header's height is smaller on mobile.
Thanks,
Tom
Firefox developer edition displays the following warning in the console
This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!
I think babel transformed your dist files in a way they might not work in every environment.
I guess the issue is, babel transformed this
to (void 0)
in the current sticky.compile.js
It worked in the previous commit.
I think you could evaluate your babel configuration.
When the content is too tall for the screen, the sticky destroys itself.
This makes sense as the default behavior because otherwise the content would get cut off at the bottom of the screen and be inaccessible.
There is another way of avoiding this though.
.sticky {
max-height: 100vh;
overflow: auto;
}
This means that when the screen is too short to fit the content the content in the sticky container will become scroll-able.
My issue is that sticky-js will destroy itself when the screen gets too short even though there is no risk of the content getting cut off.
If there were a setting that allowed you to disable the self-destruction when the screen height is too short, that would fix the issue.
Hey,
Thanks for the script, working well. The only thing being is with the parent boundary when the page is scrolled reasonably quickly the minus top positioning doesn't update quick enough and you see the 'edge' of the sticky element beyond the parent (as both have the same background colour, but are different widths). Please see below for an exaggerated example.
Seeing as we require it to stick within the edge/bottom of the parent, perhaps using absolute/bottom positioning would be a good solution? Hopefully a welcome suggestion, unless there's another reason for not using this!
Thanks again,
Tom
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.