Will only work as intended on elements with an ID, so:

$("h1, h2").sticky('destroy');

will result in all matching elements receiving a wrapper #undefined-sticky-wrapper which will not be unique.

not sure of the best way around this. maybe throw a warning? or just say in the docs that you must use ID'd elements?

hey,

i really like working with this plugin and found a nice way to use it. in chrome and safari it works great. but somehow in firefox, if you scroll up and down and up an down, the elements suddenly do not stick.

i really dont know how to fix this.

help would really be appreciated.

here is the sample page:
http://soleils.org/index2.html

THANK YOU!

Example-right.html seem buggy on IE and FF. When I scroll down, the stycky go outside of the wrapper.

i tried to a google ads inside the div which containing id="sticker" i works well BUT the ads reloading again after the page have been loaded

example : http://photoshop-online-courses.com/inspiration/the-art-of-photo-manipulation-with-photoshop.html
look at the sidebar on the left which have 2 google ads, at the page loading the ads is loaded normally but after that page is fully loaded the 2 google ads in the sidebar will be reloaded again

i think the problem is in this code :

Really i hope to fix this problem soon
Thanks

Maybe you could put MIT and your copyright at the top of the file ?
Or else this code isn't free.

Hi,

I try to use stickyjs with a jquery version 1.7.2 but, script doesn't work on chrome browser. 1.8.2 works fine but i have to use 1.7.2.

Is it a stickyjs version problem?

First, thank you for the great plugin!

We are using the plugin with IE7+. We've noticed an odd behavior only in IE7 & IE8. The issue appears to be when you dynamically add/show/hide content to the page which triggers the need for the scroll bar. In this case, in IE7 & IE8 only, the 'resize' event gets fired, not the 'scroll' event. As a result, the sticky element never gets re-rendered to reflect the new content size since all the logic to reposition the element is in the 'scroll' event handler.

I was able to solve the problem with a slight hack, that being updating the code as follows:

resizer = function () {
        windowHeight = $window.height();
        scroller();
    },

Essentially trigger the reposition logic on both resize and scroll events to capture all situations.

I'm curious your thoughts on this solution. Thanks!

when I apply the sticky function to a div with this structure:

<div id="stick">
    <p>Text</p>
        <a href="somelink.com" target="_blank">
            <img src="someimage.jpg">
        </a><br />
        <a href="somelink.com" target="_blank">
            <img src="someimage.jpg">
        </a><br />
        <a href="somelink.com" target="_blank">
            <img src="someimage.jpg">
        </a>
</div>

only the images are responding to the function. the <p /> element does not stick. I've also tried it with a <h2 /> and it won't stick either.

in fact just:

<div id="stick">
    <p>Text</p>
</div>

will not stick either. am I don't something wrong, or is this a bug?

Looks like it's pointing to an issue on line 72:

wrapper = $('

Nice project, but it doesn't work in iPad Safari mobile, my version of OS is 4.2.

Hi there.
I used sticky.js on my menu-bar and it works fine, but other javascript content on my site (eg. google map) is displayed on top of the menu when i scroll down.
Thanks again,
Jochen

Add options to fade in and fade out the object on "Stick"

via Ismael Burciaga

At least 2 variables are declared global, while they shouldn't - stickyId and wrapper.

I'm using sticky for navigation for mobile. Everything is fine until I turn the phone from vertical to horizontal, then the sticky stops working properly. Clicking on the sticky div while in landscape makes the window scroll to the top instead of making the toggle menu drop down. see:
http://www.kathleenphelpsdesign.com/mobiletest2b.html#cardfront

Adding css('height' of sticky element to the DOM is breaking my layout.

I’ve commented out line 77 and not seeing any negative effects.

Wondering if you can explain whether style="height:…" is critical to the plugin in certain browsers?

I suggest the feature that the sticky plugin is possible to let the item also be sticky on the left / right side of the window

Bower is a popular front-end package manager. It would be nice if the package could be installed using Bower.

When using the plugin twice, the second call uses the options of the first call.

example: http://jsfiddle.net/horst80/4JV4s/

Please update the demos because they are not working in Chrome.

Would be great if you could add the option to limit the sticky element to its parent container, or even specify a height from the top/bottom of the page at which a sticky element loses the fixed positioning and assumes a new relative position.

Cheers!

The Sticky plugin stops sticking in Google Chrome if -webkit-transform: translateZ(0); is included in the CSS. In my case the CSS was
html{
-webkit-transform: translateZ(0);
}

Not sure if this broke Safari as well though as didn't test it.

Hi,

I had a problem on my website where if I scrolled down before revealing/un-hiding (it is defaulted to "display: none" and I have a jquery slideToggle) the element containing my sticky div, the sticky div might incorrectly appear at the top of the window once I did reveal it.

I fixed the issue. It was only a small change... However, I am new to GitHub (and git, for that matter) and I'm not entirely sure how I can request to get this fix put back into the repo...

Hello,

bottomSpacing doesn't seem to work, is this a known bug?

If you use this on a fluid layout, the size then needs to be updated based on the window size. If the content is dynamic and newly loaded content changed the document height, then again the size might be invalid.

Thanks for this great plugin! But I have a problem on the iPad (Other tablets too?). The sticky object is very very slow when scrolling. Any idea? Tested on your website http://stickyjs.com and on my website, too.

Hi, great plugin but there's always one issue that has been bothering me..
If the sticky element's height changes on responsive layout then the inline height that's specified on the sticky element will become incorrect.

So it's good if there is some method added that can be used to recalculate the element's height like on window resize.

Thanks :)

Once an item is stickied, the script is applying a fixed width, even with no 'getwidthFrom' specified. This was causing me a bit of a headache at first because I am using it for a navigation item that has a 100% width. I was able to fixed this by changing the default value of the variable from '' to 'undefined' (line 20).

Allow us to change the default z-index of the main Wrapper. I need to change it becouse it is appearing bellow some divs.

Hi!
bottomSpacing works fine in Opera, but Chrome/FF use it only after reloading 1-2 times.

GG

Lack of clear licensing (eg. in source-code) makes it difficult to use this plugin freely (if that is the purpose).

Hi I can't find a way of resizing the stick bar i have on window resize. The thing i need to resize is the getWidthFrom. the getWidthFrom needs to update. Any way to do this?

could possible solution using the sticky('update') method?

For example in the demo site "http://stickyjs.com/", scroll using mouse wheel, when element is about to stick to top, it is disappearing for a moment and then displayed - this is causing a flicker effect, is there any solution for this sticking to happen in a smooth transition. But when, window is scrolled using mouse pointer, the transition is very smooth(this effect is required when scrolled using mouse wheel).

Hi,

I've come across an issue local to Google Chrome when I have elements in the stickElement object that use CSS3 linear-Gradients (it may go beyond CSS3 linear-gradient but I haven't looked in other scenarios), they seem to re-render themselves with a noticeable jump when the wrapAll() method is called, this also forces the stickyWrapper to inherit an incorrect height.

I have looked at the plugin and have re-written a few areas to drop use of wrapAll() and instead use a clone() of the stickElement, create a new jQuery DOM object for the stickyWrapper, apply css attributes based on the original stickyElement that is still in position in the HTML DOM, append the clone stickyElement to the new stickyWrapper and replace the original stickyElement in the DOM with the new object using replaceWith()

My new code:

/* Sticky Plugin
** =============
** Author: Anthony Garand
** Improvements by: Phil Middlemass (www.leighton.com)
** Changelog:   Remove use of wrapAll() to work around rerendering issues with
                CSS3 linear-gradients of elements with the stickyElement in
                Google Chrome. Now uses combination of a cloned stickyElement
                and a new jQuery DOM element and replaceWith() to replace the
                stickyElement with our new code.

** Date: 8/17/2011
** Website: http://labs.anthonygarand.com/sticky
** Description: Makes an element on the page stick on the screen
*/

(function($){
    $.fn.sticky = function(options) {
        var defaults = {
            topSpacing: 0,
            className: 'is-sticky'
        };  
        var o = $.extend(defaults, options);
        return this.each(function() {
            var topSpacing = o.topSpacing,
            $el = $(this); /* New reference to original Sticky Element */
            stickyElement = $el.clone(),  /* StickyElement now becomes a clone of $el (to maintain CSS3 rendering) */
            stickyId = stickyElement.attr('id'),
            fixed = false;
            stickyElement
                .css('width', $el.width());     /* Use the DOM properties of $el to set data on stickyElement */
            var stickyWrapper = $('<div id="' + stickyId + 'StickyWrapper"></div>');    /* Create New DOM element for the wrapper - Removed use of wrapAll (CSS3 compatibility) */
            stickyWrapper
                .css('width', $el.outerWidth())     /* Use the DOM properties of $el to set data on stickyWrapper */
                .css('height', $el.outerHeight())
                .css('clear', $el.css('clear'))
                .append(stickyElement);     /* Append our new cloned element to stickyWrapper */
            $el.replaceWith(stickyWrapper); /* Replace $el in the DOM with our new stickyWrapper */
            $(window).scroll(function() {
                var scrollTop = $(window).scrollTop();
                var elementTop = stickyWrapper.offset().top;
                if (scrollTop <= elementTop - topSpacing) {
                    if (fixed) {
                        stickyElement.css('position', '').css('top', '').removeClass(o.className);
                        fixed = false;
                    }
                }
                else if (!fixed) {
                    if (scrollTop >= elementTop - topSpacing) {
                        stickyElement.css('position', 'fixed').css('top', topSpacing).addClass(o.className);
                        fixed = true;
                    }
                }
            });
        });
    };
})(jQuery); 

I'm now using this on some prototype pages for a client and all seems to good so far.

let me know if this is something you can absorb

Phil.

In Firefox version 26.0 the 'example-right' is not functioning properly. When you use firefox the sticky container jumps to the right as you scroll down. It seems to work fine in Chrome and Safari. I am experiencing similar results in one of my projects.

Any suggestions on how to resolve this issue?

If my screen is too small, the sticky area will overlap areas it shouldn't. I will look into this and write a pull request if I have time but was hoping someone might have a quick fix instead!

This isn't exactly a bug, more of an idea to improve the plugin, perhaps having some kind of allowable zone the sticky area can stay in?

Thanks for the Plugin! I really appreciate your work.

Of course IE does make problems: Line 72 (wrapper = $...) produces a failure: "Object doesn't support this property or method"

i would like to have a sticky footer bar as easy usable as your sticky top (bars) are :)

Scrolling up past the viewport causes sticky element to jump. If you scroll down it doesn't appear to have this behaviour.

Hi,
I'm using the plugin in a "responsive" design, which the div wrapper should be height: 100%. In order that when browser window is resized(without reloading)height should always fit(it doesn't happen atm, as #sticker-sticky-wrapper generates a height in px ).

I tried this http://jsfiddle.net/UgPFQ/
but now, in the moment when the transition occurs, there's a "bump" going on. The transition is not smooth. I has a quirk as soon as #sticker gets hidden.

I was discussing the issue with a friend, and the guess was that:
"the plugin creates some empty space at the top of the page, which appears behind the sticky element, so the rest of the page still sits in place.

The above code changes the height of the sticky element to 100%, but the code is still using the old value for the height of the space it creates, which is why is jumots."
Any ideas in how to make this working?

My sticky element was working perfect, after I have modified menu css(and a little html structures), it gets wrong position!!

Please see my code: http://codepen.io/bard/pen/ydrfC

I have worked 2 hours on this, just don't see the problem.

Just modified an already modified version... Otherwise i have offered a pull request. What i needed was to make the bottomspacing be variable and not a fixed value. We have a responsive layout. so the bottomspacing needed to change... In the modified version we use there are two new variables "bottomSpacingEl" and "bottomSpacingElPadding". The element is the element which offset defines the bottomspacing, the bottomSpacingElPadding is used for a space. Very simple but useful addition maybe :) Just an image of the diff..

Saludos

When I use sticky nav for anchor jump links on the page, the page jumps to have the anchor at top:0px of the page, but this is hidden under the sticky nav. The plugin should account for the height of the sticky nav and adjust anchor links to show up right below the sticky nav.

See screenshot of what's happening now:

It should look like this:

Hi! This plugin has saved me countless hours! 🍪 😄

But I want to give some sticky elements on my page some common styles, so I set the plugin's className option to something common to these two elements, e.g. sticky-top-bar and style it.

The sticky wrapper plugin however, does apply this class both to the wrapper (.sticky-wrapper) and to the sticky element. So when the element is sticked, then the styles are applied to both elements, which looks weird.

My suggestion would be to omit the className from the wrapper, but I don't now which technical decision was behind this.

Sticky headers don't update on iPad iOS7 until the screen has stopped moving

when scroll is done without finger swiping, sticky element doesn't stick to top.

i am currently using this to make the page scroll to a specific element:

$(function() {
    $('nav a').bind('click',function(event){
        var $anchor = $(this);

        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top -60
        }, 1000);

        event.preventDefault();

    });
});

would be ideal for the bar to stick to the top when the scroll is done.

thank you for this plugin btw, its super slim and useful.

Hi,

I'm trying to make something sticky inside a scrolling div, it might just be my example but I couldn't get it to work.

Looking through the source code I'm guessing it's based upon the window itself scrolling - which is cool as I'm guessing most people will want that.

It would be handy to be able to override which element we treat as the scroller.

I'd love to see a destroy method so I can programatically remove sticky-ness from the page.

As far as I know, this method is recommended for all jQuery plugins.

hello:
This plugin seems wonderful, and its operation is very aesthetic.
But I encounter a problem.
When I apply it to a flash banner, it doubles or triples. So, 2 or 3 times the flash banner.

Thanks!!

I'm currently using the sticky plugin to hold a list of page anchors, which use jQuery's .animate() function for smooth scrolling. However, when any of the anchors are clicked, the sticky div ends up overlapping some of the content. Is there a way to prevent this overlap, since the position of the div isn't static?

Thanks!