A jQuery plugin for creating smart sticky elements
Home Page: http://leafo.net/sticky-kit
A jQuery plugin for making smart sticky elements.
See the homepage for directions and examples: http://leafo.net/sticky-kit/
Are you having trouble getting something to work? Consult the troubleshooting guide.
$ npm install sticky-kit --saveFind sticky-kit.js in the dist/ directory. Make sure to include it after
jQuery.
$ bower install sticky-kit --saveInclude sticky-kit.js after you've included jQuery on the page.
Refer to the homepage: http://leafo.net/sticky-kit/#reference
MIT
I have sticky elements at the top of divs that are hidden until explicitly opened by the user.
Sticky elements below the first div are sticking to a fixed position that includes the depth of the hidden panels above, whether they are hidden or shown. So if all the panels above a given one are open, the sticky elements seem to be working fine, but if any are closed, the sticky element is too low on the page by the depth of the hidden panels.
For example, the first hidden panel in this test is about 907px high. When it's open, the sticky element at the top of the next panel is fine. But if that first one is hidden, the sticky element in the second panel is about 907px too low on the page:
http://insightcx.info/tests/stickykit/
Any way to account for hidden divs when calculating the sticky element fixed position?
Thanks!
Say you element is_stuck and you do the following thing:
window.scroll(0,0)$(document.body).trigger('sticky_kit:recalc')Then the following event does not get triggered: sticky_kit:unstick.
A quick hack would be to tick() before a recalc() as follows:
recalc_and_tick = ->
tick()
recalc()
tick()Obviously this is a really dirty hack. I am not sure how this can be solved right now. The problem comes from the fact that we do a fixed = false when setting the restore variable.
Sticky Parent is ignored when using IE8 and covers up footer even in the examples on the stick-kit examples page.
i used this great plugin in one of my projects with floid grid system that i make for my self.
so the problem was plugin put an integer number for width of sticky element and this cause problem with layout , that is , element get out of original position and take place at somewhere else.
(sorry for my bad english)
anyway i propose to use parseFloat instead of parseInt function because in floid layout (e,g bootstrap) those little float numbers do matter in layout and if plugin round width of element up or down layout can crash.
thanks.
Hello, I need your help.
I'm trying to put some Google DFP Adsense Banners in a sidebar, but when the sticky begins, all the banners disappear!!!.
The banner code is wrapped by <script> tag.
I dont know why, please i need your expertise.
Is it possible to "stick" the element to the bottom of its parent? If yes, how?
Thanks!
In my example, I have a main section that gets stuck (div containing "The Journey" and subsequent sticky items). Then each of the 3 items scroll up and get stuck. For some reason, only in IE, the second item (the one on the far right) bounces up and down while you continue to scroll.
Example: http://screencast.com/t/288WXpJT3YkN
In Chrome, Safari, Firefox it all works fine.
offset_top is set (~60px)
If the content is about the same size as the window size:
(container.height > content.height, container.height = sidebar.height > content.height)
Not sure how this happened, but the current bower tracked version of sticky-kit is making everything apslode.
bower EMALFORMED Failed to read /var/folders/9k/dl2dgy5d69x9fhqyfc294zpw0000gn/T/thealphanerd/bower/sticky-kit-7491-FxcINE/bower.json
This error is also received when installing from the git repo for 1.0.0 and 1.0.1
Only way I have gotten things to install properly so far is by install via the 1.0.0 tagged tarball
I can fix this by changing the 'top' calculation in recalc to:
top = sizing_elm.offset().top - (parseInt(sizing_elm.css("margin-top"), 10) || 0) - offset_top;
First of all, congratulations on this awesome piece of code, I've been looking for such a plugin for a long time!
I've been trying to get sticky-kit to work with a column layout built with Foundation 5, but failed miserably.
You can see it in action in this fiddle: http://jsfiddle.net/sp7ssjx7/
Did I do it wrong, or is there an inherent incompatibility between sticky-kit and the Foundation grid?
Getting both to work together would be a bless.
Sometimes it is useful not to have elements stuck to the top of the window, but say 50px from the top.
Being able to pass a top offest would be useful.
I noticed an offset variable in the code, but couldn't see how to extend the plugin to use it
Thanks
I tried adding a background-color CSS Transition with no success - I believe this is because the class is being appended to the node, which is then being removed and appended into a fresh div, thus losing its transition state.
trigger("sticky_kit:recalc") -> textarea loses focus*
*(textarea auto height)
Hi, first thanks for the plugin, I have found it to be very useful.
I've got a bit of an issue when applying the following CSS to my document (see here) :
html {
height: 100%;
width: 100%;
overflow: hidden;
}
body {
height: 100%;
width: 100%;
overflow: auto;
}I'm writing a single page application that needs the elastic scrolling disabled. However with this CSS, I can't get sticky kit to work; I'm assuming that it's because the scroll context of the page is changed from the window to the body instead, but I have no real idea about how to fix this issue. Removing this CSS means that sticky kit will function as expected, but that's not ideal for my use case.
Any advice would be appreciated. 😃
Hi,
I am using sticky kit on a new open source WP theme I am making. So far it is great and I really love the effects.
However, the theme is made with bootstrap and thereby it is responsive. The problem occurs, when I resize the browser, the sidebar goes down to bottom (as expected) and then I wouldn't want the sticky thingy to happen. Is there any way I could destroy the event?
This is the code I've been using
// A switch to chekc if sticky kit is activated
// For the adjust_height function
var sticky_on = false;
// Adjust the height of the container
// To make the footer stick
var adjust_height = function() {
$('#content').css('min-height', '0');
$('#secondary').css('min-height', '0');
var window_height = $(window).outerHeight(true) - $('#masthead').outerHeight(true) - $('#colophon').outerHeight(true) - parseInt($('html').css('margin-top'), 10),
content_height = $('#content').outerHeight(true),
min_height = Math.max(window_height, content_height);
$('#content').css('min-height', min_height);
if ( $(window).outerWidth() >= 768 ) {
$('#secondary').css('min-height', min_height);
}
if ( sticky_on ) {
$(document.body).trigger("sticky_kit:recalc");
}
};
adjust_height();
$(window).on('resize', adjust_height);
// Apply the sticky kit
if ( $('.ipt_kb_affix').length ) {
// Make sure the secondary height is same as the container
// No need to do it here, as already done in the adjust_height
$('.ipt_kb_affix').stick_in_parent({
inner_scrolling : false,
offset_top : 30
});
sticky_on = true;
// Bind the event on collapsibles
$(document).on('shown.bs.collapse hidden.bs.collapse', function() {
$(document.body).trigger("sticky_kit:recalc");
});
}
Just for clarification, the .ipt_kb_affix is fixed inside #secondary container. On window resize, I am making the container height to match the parent for sticky kit to work.
You may not notice this if your element is naturally position:static, but a position: relative element can get moved out of position when unstuck
Hi there,
I think I found a glitch that involves extending sidebars.
I made an example for this:
http://jsfiddle.net/Celldweller/V9UxA/15/
Any ideas what the reason could be?
Regards and keep up the good work. I really like sticky-kit :)
Hi,
Great plugin but I don't understand why my stick item is removed (yes not juste hidden) from DOM when is do $('.my-item').trigger('sticky_kit:detach')
Not working as excepted in the doc ...
Thanks
Hi. I think I may have find a bug (or my implementation is incorrect).
I have a container, with a floated element that is my sticky element. I wait for the images to load (with imagesLoaded plugin) and then I attach the element with sticky_kit.
On scroll, I load another container with ajax. I apply the same process (wait for the images to load, then attach the element). To avoid detach/attach operation, I check all element with jQuery( this ).data("sticky_kit") and attach only the newly loaded element.
On window resize, beyond a certain window width, I detach all elements.
Everything works fine, but the problems I saw are :
-+ When I detach elements, they disappear. In the DOM, only remains a empty div (added by the sticky_kit plugin).
-+ When I resize the browser, the stickies elements get superposed to each other. If I scroll to the top then down to the bottom, each element finally gets back to the right places (and sticks as it should).
-+ I tried to do a recalc on the resize, but I guess the superposition is because of the recalc.
I can provide a link to a live website to see by yourself. You could load the page, resize it (you will see the superposition) and if you resize under 640px, the detach fonction is triggered and the elements disappear.
Tried out your plugin and for most part it is working better than any other of the sticky plugins that I tried, so thanks for the great work on that side. But there is one bug. I have this video-element which should stay sticky and it does, but when I scroll to the very bottom of the page it just disappears like this:
Instead of looking like 'sticking' to the end of the parent div like this (this is using position: sticky in the firefox nightly)
If the bottom of the element is in view when you recalculate, it goes wrong and starts just jumping from top to bottom.
Difficult to explain but see this fiddle: http://jsfiddle.net/sR9Aw/1/ scroll to the bottom then click "Click me".
I love this plugin, but it doesn't work in I.E. 8 at all.
I can't see any way to check the sticky item has been detached, and if it has, to re-attach or stick_in_parent it.
Is there a way to achieve this?
Clever solution, but anytime you mess with markup (especially wrapping elements so you can do stuff on the fly) it's bound to break something.
In my first and only test it broke my layout because the sticky element's parent had :last-child { margin-right: 0; } and the plugin broke that since it wrapped the sidebar element therefore turning it into the last child.
Also resized my sidebar since it was sized in percentages and plugin works in pixels only... :\
Hi I'm removing a dom upon resize. All works well if you're at the top of the page and the dom is either not triggered, or triggered then put back into its non-triggered state.
When I run 'sticky_kit:detach' when the element is stuck the div it works and the element is unstuck. However, if I attempt to re-stick this element (using the stick_in_parent() or sticky_kit:recalc' method then my dom element is destroyed.
I've seen two other issues relating to this, one of them involved modifying the core files and was posted back in June. Is this script still being supported?
#23 #57
If you are using using box-sizing: border-box and have padding or a border on the element being fixed, Sticky-Kit will apply the wrong width to the element.
It's possible for elements to have fractional widths, e.g. 225.5px. This is very common in percentage based layouts, such as Zurb Foundation's grid system.
jQuery's .width() and .outerWidth() functions will round to the nearest px. When Sticky-Kit creates the spacer div it will use this rounded value, potentially breaking your layout.
Steps to reproduce:
There is an old jQuery bug report for this, but I'm not hopeful it will get fixed anytime soon: http://bugs.jquery.com/ticket/9628
A better solution would be using the native .getBoundingClientRect() method instead of jQuery's .outerWidth(). I think we would then need to add the padding and border, and possibly account for some crossbrowser issues. See http://stackoverflow.com/a/16072668/952156
When the height of the sticky-element is as high as the parent at start, the events won't ever get binded thus making it impossible for stickykit to activate when the content changes or when the window resizes.
A simple fix is commenting the following on line 71:
/*
if (height === parent_height) {
return;
}
*/
I don't know why this is even in the source code :)
First of all, nice plugin so far!
Though, I'm having the following issue. The websites states:
Typically you only need to trigger a recalculation if you are changing the positions/sizes of elements above the sticky element, adjacent to it, or the sticky element itself.
In my case, the stuck element itself changes height, which causes the issue. It does not happen when the element isn't stuck. This can be reproduced by changing the "Basic Stick" test to:
<h1>Basic Stick</h1>
<div class="container one">
<div class="item"></div>
<div class="item full"></div>
<div id="grow_1" class="item"></div>
</div>Also note that the spacer element doesn't recalculate in any way (initial, stuck or unstuck).
Hi. I think I may have find a bug (or my implementation is incorrect).
I have a container, with a floated element that is my sticky element. I wait for the images to load (with imagesLoaded plugin) and then I attach the element with sticky_kit.
On scroll, I load another container with ajax. I apply the same process (wait for the images to load, then attach the element). To avoid detach/attach operation, I check all element with jQuery( this ).data("sticky_kit") and attach only the newly loaded element.
On window resize, beyond a certain window width, I detach all elements.
Everything works fine, but the problems I saw are :
-+ When I detach elements, they disappear. In the DOM, only remains a empty div (added by the sticky_kit plugin).
-+ When I resize the browser, the stickies elements get superposed to each other. If I scroll to the top then down to the bottom, each element finally gets back to the right places (and sticks as it should).
-+ I tried to do a recalc on the resize, but I guess the superposition is because of the recalc.
I can provide a link to a live website to see by yourself. You could load the page, resize it (you will see the superposition) and if you resize under 640px, the detach fonction is triggered and the elements disappear.
(Edit : I commented the line 182 win.on("resize", recalc_and_tick); and all seems to work again. Maybe that was because I triggered on window resize and the plugin too : collision ?
If I set the css property for right to 0, the stuck element is flush against the browser window instead of the parent as would be expected for fixed elements. Elements stuck to the left work fine.
The solution I'm using is below but a more packaged solution would be ideal, is a bit troublesome with responsive design.
var wrapperObj = $('.wrapper');
var wrapperOffset = wrapperObj.offset();
var socialNavObj = $("#socialNav");
socialNavObj.stick_in_parent({
parent: '.wrapper',
offset_top: 60
})
.on("sticky_kit:stick", function(e) {
socialNavObj.css('left', wrapperObj.outerWidth() + wrapperOffset.left);
})
.on("sticky_kit:unstick", function(e) {
socialNavObj.css('left', 'auto');
});
Hello,
Sticky-Kit relies on the body scroll values to work, but since my web app uses divs as main containers, the body never scroll.
Here's an oversimplified version of what I mean:
http://jsbin.com/yitoheno/4
Is there a workaround for this? Maybe the plugin already accounts for this and I'm missing something?
Thanks!
Im showing a pdf inline in an object tag, contained in a height: 100% div. as the user scrols down, the pdf must stick on top, that's cool.
But every time the object tag gets inserted in the dynamic container div. the pdf get reloaded.
When triggering the detach function to a sticky element, the window resize event was not being removed and as such the re-calculation was still being done. This resulted in the element being removed when detached. To fix said issue,the following code was added to the detach function:
detach = function() {
win.off("scroll", tick);
$(document.body).off("sticky_kit:recalc", recalc_and_tick);
elm.off("sticky_kit:detach", detach);
win.off("touchmove", tick);
win.off("resize", recalc_and_tick);
elm.removeData("sticky_kit");
elm.css({
position: "",
bottom: "",
top: "",
width: ""
});
parent.position("position", "");
if (fixed) {
elm.insertAfter(spacer).removeClass(sticky_class);
return spacer.remove();
}
};
With these modifications the problem seems to be resolved.
The version on Bower currently has the console.log bug, and the jQuery Plugin Registry is back on version 1.0.1. Can you bump this to 1.0.3 and push that out to Bower and jQuery?
Thanks
So if there is a really tall element where it's height + offset_top is greater than the viewport height, it scrolls until the bottom is visible and as a result the top placement is too high.
Broken example in short viewport: http://screencast.com/t/Vx6hlTRpgvao (the needle is supposed to line up within the white box)
Working example in taller viewport: http://screencast.com/t/Y9imEfz8OEO
element no longer exists on the page.
Hi,
I have problem using sticky-kit with twitter bootstrap 3. Is here any way how to fix it?
http://jsfiddle.net/sa3HD/21/
Great plugin btw!
Trying to run StickyKit through the YUI compressor pukes because you're using the variable name 'float'.
I replaced it with "css_float" in my local copy, and that fixed things.
Hello,
I am trying this script but unable to find a way to stop sticky sidebar on screen size below 992px wide.
Any ideas would be appreciated to work around this.
When scrolling and upon reaching the bottom of the page, the element being stickied just vanishes off of the screen. I thought it was the top: auto doing it, but when I removed that, it kept doing it.
Also, same issue in 1.0.2 and current.
When in fullscreen, all works great. But when you shrink the screen down, as if using an iPad, the content not stickied falls below the sticky element and scrolls over it.
Playing with it more, when resizing (Responsive design using Gumby Framework) it randomly jumps back into place and scrolls fine. It is so random. At screen width 759, it gets funky. Width 760, its fine. 762 & 3, funky. 764 fine. Can see it popping around.
I know the responsive is fine. Does not do this without the sticky script running.
I'm using Sticky Kit on an absolutely positioned element, so I don't need a spacer div. While it's possible to hide it through CSS, there's no unique classes, so there's currently no way to hide this.
Hello,
I'm working on a responsive website with a horizontal navbar that should be fixed positioned / sticky if the user scrolls down, but only for windows with a certain width (e.g. wider than 601px). If the screen width changes below this threshold (e.g. lower than 600px) the "stickness" should be removed. When changing back to a wider width it should be re-added again and so on ...
Everything works fine as long as the scroll position is top (or the stickynes is not already triggered) when the window width change happens.
Otherwise, for example when you have scrolled down a little and change the window with afterwards (which calls the detach method) the complete navbar gets removed from the DOM.
I've created a fiddle to explain the problem: http://jsfiddle.net/4msAr/4/
Example:
Bugs happen:
Did I understand something wrong? I expected the detach method to remove the spacer container and removing the inline-styles on the sticky-target / navbar.
Here's the actual code (which I also used for the fiddle):
/* EXAMPLE */
$(function() {
function mNavSticky_addNavStickyLogic() {
// if is already initialized
if( $("#navbar").data("sticky_kit") ) {
$(document.body).trigger("sticky_kit:recalc");
}
// else is not initialized yet
else {
// init sticky-kit for navbar
$("#navbar").stick_in_parent();
}
}
function mNavSticky_removeNavStickyLogic() {
// if is already initialized
if( $("#navbar").data("sticky_kit") ) {
// destroy sticky-kit for navbar
$("#navbar").trigger("sticky_kit:detach");
}
}
function NavSticky_WidthChange(mq) {
// if window is wider than mobile
if ( mq.matches ) {
mNavSticky_addNavStickyLogic();
}
// if window is mobile (smaller than desktop)
else {
mNavSticky_removeNavStickyLogic();
}
}
function NavSticky_AddMQListener() {
var mq_min_desktop = window.matchMedia("screen and (min-width: 601px)");
mq_min_desktop.addListener(NavSticky_WidthChange);
// Initial check for current Media Query State / Window Width
NavSticky_WidthChange(mq_min_desktop);
}
// INIT
NavSticky_AddMQListener();
});
It doesn't work well, when I'm scrolling horizontaly.
It works when it's on the top (because no absolute positioning used in this case):
I have #sidebar-primary { margin-left: 5%; }. This causes the element to slightly jump around when it becomes (un-)stuck. Using absolute margins such as 1em works, but can this be improved for %-s as well?
The sticky element doesn't unstick at bottom of parent element and maintains position:fixed in IE8.
Is it possible to recalculate when the window is resized?
This doesn't seem to work:
$(document.body).trigger("sticky_kit:recalc");
Thanks for your hard work!
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.