Reference: http://jsbin.com/yoronilovi/1/edit?html,css,js,output
Can't seem to figure out whats going on here. In the example "fixedsticky-on" never seems to get triggered as you scroll down the page.

If I move the nav outside the header, everything works as expected. (http://jsbin.com/yoronilovi/2/edit?html,css,js,output)

Am I missing something?

I've failed every time I've tried to use this plugin and I swear I'm an experienced web developer and not a complete idiot. Results are mixed but never quite what I'm expecting. DOM structure seems to matter a lot here. Also the plugin doesn't seem to account for margins and paddings in some cases?

all demos not working on newlast mac os and chrome.

Anytime I load a page with a hash in the location, I don't see the "fixedsticky-on" class being added in Chrome.

Hello,

i want to fix a element to the top when it reaches the top by scrolling. At the beginning it is not on the top.

It works really fine on Desktop Chrome and Firefox.

But on mobile Chrome i get a flickering effect. Its like it is set to fixed a few pixels too late.

Any Suggestions for me?

Kind Regards, Domenico Iavicoli

There's no banner with credits and license infos are missing in fixedsticky.js

Hi,

This is a great polyfill. However, it only supports top/bottom position values, is there any plan to support left/right as well?

https://github.com/filamentgroup/fixed-sticky/blob/master/fixedsticky.js#L140
I guess something like .nextUntil( '.' + S.classes.clone ) was proposed, but it doesn`t work.
for me it works: .next( '.' + S.classes.clone ).remove();

Scripts & css loaded, No errors..?

http://ggdev.jynk.net

$( '#nav__scrollto' ).fixedsticky();

<nav id="nav__scrollto" class="section_scrollto--nav top fixedsticky"> <?php for($x=0;$x < count($section_list);$x++){ ?> <a class="nav-link" href="#<?= $section_list[$x] ?>"><span class="nav-link__label"><?= $section_titles[$x] ?></span><span class="nav-link__dot"></span></a> <?php } ?> </nav>

.fixedsticky { top: 0; }

Simple as it says. this is passed into the fixedsticky.js IIFE. Browserify sets this to undefined in the context of each compiled module.

This can be worked around by wrapping the require in (function (){...}).bind(window).call(), but if you're using something like Traceur (where imports are statements, not expressions) it falls apart.

It should be window, not this.

Hi, I want to temporarily destroy the plugin, how can I do that?

plz advise. thx!

Tried this with yepnope.js (included with Modernizr) and doesn't seem to work.
Is AMD supported in any way or is this an isolated case? If so I'll investigate more to see if I can help anyway.

Nice work, by the way!

hi, I used this plugin quite often, but recently I start to use react, as you know, jquery is not so important when using with react.

I don't want to increase my size of js files, so is it possible use this plugin without jquery dependency?

plz advise.

thx.

Has anyone else run into this? If the sticky element's parent is set to display:flex, the sticky element flickers on/off. I'll post a test case from codepen shortly.

What I imagine to be a common use case is adding styles to an element when it's sticky, for example a box shadow to make it appear above the contents scrolling beneath it.

While this is easy when the polyfill is in effect, since it toggles the fixedsticky-on and fixedsticky-off classes, it's not possible when position: sticky has native support, as far as I know.

For browsers that support native sticky position, I think there is no property available on the DOM node object that tells you if the element is in a sticky or non-sticky state, so good old fashioned scroll event listeners would be necessary. It would be great if this library could still toggle a class on the element to allow this kind of styling even when there is native sticky support. Thoughts?

http://jsfiddle.net/1geengno/1/

I suppose I did everything the way it is described in the readme, still can't get it running.
Can anybody help?

This would be great to use within browserify. Is that integration in the road map?

When the plugin is activated it scrolls to top of page. Since it needs to wait for the load event (some resources are causing issues for calculating positions) then the user often scrolls a bit before the plugin loads, meaning the user is being bugged by this.

Check out http://blog.tattoodo.com/ for an example. The newsletter widget in the right sidebar is supposed to be sticky. Open console and fire: $(window).trigger('scroll.fixedsticky') to see the effect.

Browser: Chrome

Fixed-sticky applied to an absolutely positioned element works great in Chrome, but

• in Safari, fixedsticky-on is never applied
• in Firefox, fixedsticky-on is immediately applied and never removed

Hi, I was wondering if it's possible to make the plugin work when the sticky elements are inside a scrollable container instead of the body.

E.g. in a mobile app I'm creating, the nav bar is fixed at the top and the content container has position:fixed; top:44px;
The user scrolls the content in it, not the whole page. My sticky elements are inside this container.

Thanks,
Luca

better use mine: https://github.com/soenkekluth/sticky-state
(demo is yours with my module)
overflow:auto > position:sticky will be supported in a moment

I use Bootstrap 3 and am experiencing the exact same issues as I would when using position:fixed on on of my columns when using this plugin.

As I scroll the browser, when the fixing/stickying kicks in my div width changes. I just want to keep it the same width. This is happening in Chrome but not Firefox.

It also only works when applying the ID and class to the column itself, and not a child div of the column:

Works:

<div id="fixedQuoteSidebar" class="col-md-4 hidden-sm hidden-xs fixedsticky" >

        <div class="alert alert-success paddingtop5 text-center">
        </div>
</div>

Does not work:

<div class="col-md-4 hidden-sm hidden-xs " >

    <div id="fixedQuoteSidebar" class="fixedsticky">
        <div class="alert alert-success paddingtop5 text-center">
        </div>
   </div>

.fixedsticky-on is being called up to 700px above the parent container of .fixedsticky-on. I've tinkered with setting a fixed height and width on the parent container and .fixedsticky element. If the width of the browser is changed, fixedsticky-on is called at different times, all still way above the target container

Check out the problem here: http://www.meventi.de/event-6634-17727-Ballonfahrt-Aachen.html. Make sure your browser is small tablet size or mobile. fixed-sticky is deactivated in larger views.

before

and here's where everything goes crazy

Note:
This problem does not happen when 'position:sticky' is working.

@zachleat @jefflembeck @jonykrause @wshaver and anyone else

This would increase confidence in the library and make maintenance easier.

If I scroll really quickly with a fixed/sticky element on the page, the repaint gets a little choppy. I understand it's a balance between having a smooth transition when a sticky element snaps into place and having a smooth scrolling animation for the rest of the page, have you considered adding a debounce option?

I tried working your script with jquery mobile but it seems to be not compatible with it. I tried searching by myself by building custom package but I don't found anything.

However in my desktop web browser it's working fine but in ios (safari and chrome too) the DOM element not sticky ... I don't know what happens :/

Can you help me ?
Thank's

Support for overflowing would be very useful,
especially when height: 100% has to be used on the parent (html, body) elements.

Thanks.
With best regards

I see in you to-dos you have listed a vanilla JS version. Have you made any progress on that?

Hi,

I was just wondering if this is planned at all or if you consider it not being worth adding support for.

Basically, a reason one might use table-cell is to ensure unconditional equal heights on elements as opposed to inline-block. Say for eg. a main content area and a sticky sidebar to go with. Here's a JSFiddle of a similar markup I'm talking about where fixedsticky doesn't work:

http://jsfiddle.net/RXFRD/

I hope you can understand the use-case and hopefully in the near future implement some sort of support for it or alternatively maybe some markup to accomplish similar layouts where fixedsticky would work?

Best regards,
Rayken

When using angular, it would be fantastic to be able to use fixedsticky() on an element, then forget about the fixedsticky api and instead use ng-hide or ng-show bindings in order to control the visibility of the sticky menu. Unfortunately, this leads to some unfortunate behavior because while the sticky is hidden (but not 'destroy'ed it doesn't calculate position quite correctly.

Is there a function in your api to force a positional recalculation? If not, would you be receptive to a pull requests which adds a simple feature along those lines?

In Firefox, an element's css bottom is computed as the negative of top. Therefore, position.bottom is always true....

https://developer.mozilla.org/en-US/docs/Web/CSS/bottom

Awesome job with this by the way. Best solution I have found.

Do you think it would be possible to stick to the top of the parent and not just to the top of the window? I'll start playing with the code, but thought I would see if anyone had tried yet.

Take this JS Bin: http://jsbin.com/rumahewupu/2 (It uses the code from the issue-28 branch to allow for the bottom transition case.)

The problem is that the sidebar scrolls to the very end of the container element even though the container has a bottom padding. Safari 8 respects the padding.

This should not be the case. Instead, it should

1. test for native support
2. test if the polyfill works properly when FixedSticky.tests.sticky = false; is set.

Remove bower_components from master. Remove other cruft from gh-pages.

Hi there,

The polyfill does not work correctly anymore on Chrome 52.

It starts to fix the element on top when you scroll down, but does not release it when you scroll up.

What I found out so far is that the polyfill uses jquery's css-function to get the top and bottom-values and check if these values are "auto" (see https://github.com/filamentgroup/fixed-sticky/blob/master/fixedsticky.js#L93)

the css-function of jquery uses the browsers getComputedStyle-function and this function now (correctly) returns the computed value, not the actual value that is set in the stylesheet.

So this line above (https://github.com/filamentgroup/fixed-sticky/blob/master/fixedsticky.js#L93) will always yield position = {top: true, bottom: true} .

Later isFixedToBottom will return true because of this and this leads to the problem.

I don't know how to actually fix it yet, but maybe someone has an idea.

Seems like initialOffset is incorrectly calculated in some places.

            if( !initialOffset ) {
                initialOffset = $el.offset().top;

If $el.offset().top returns zero then this check will keep running until it finds something non-zero and end up in an incorrect state.

            if( typeof initialOffset === 'undefined' ) {
                initialOffset = $el.offset().top;

Seems to correct the issue.

So, one issue I experienced during testing was that the polyfill did not reflect my original positioning of the target element that should have sticky position. The element has position: relative (it might be the root cause that this is overwritten with static by the polyfill), and had also a float: right set. I’m not entirely sure if the float caused problems by itself or if it’s only the position mode. Therefore I file this issue.

Looking at the demo (as well as my own test implementation) with Chrome 35 OS X, when an element switches from .fixedsticky-on to .fixedsticky-off it just out of view, but in sticky supporting environments it will be stuck to the bottom of the container and scroll out of view.

This jump is particularly jarring with taller elements (for example, a sticky sidebar rather than the short demo header), a behavior I can't have this happen in my particular project.

Example: scroll down in the demo watch the behavior of the red "Fixed to viewport top A." banner (#top-a) in demo when the first grey .container begins to leave view.

Potential Solution: Perhaps rather than using the "off" mode, having an "end" mode, setting position:absolute; bottom:0 (or calculated top) so the .fixedsticky item doesn't go poof?

The sticky element starts flickering anytime the user scrolls after having refreshed the page anywhere other than the very top. Any ideas?

It would be helpful publishing this to npm registry,
a package.json is already there anyway.

Thank you and
with best regards.

via #87

Hi, I'm not sure if this is due to changes since the docs were created, but the bit that tells you how to override the native sticky implementation appears to be incomplete, it now needs fixedsticky to be reinitialised otherwise the init() function is never completed. So I think it should be:

FixedSticky.tests.sticky = false;
FixedSticky.init( $('#your-element') );

The demo i downloaded doesn't work. the sticky function works on safari only.

It is not working in Chrome

When disabling native support, my implementation and also the demo (http://filamentgroup.github.io/fixed-sticky/demos/demo-opt-out-native.html) doesn't work in Safari.

I'm running Safari 8.0.3.

I don't have a video to demo (yet, and hopefully you can reproduce) but to put it in words the top red box for example jumps directly to the bottom of the top grey box instead of smoothly scroll.

Thanks for this great project!

Quick question: with native sticky positioning, it looks like z-index is respected even when the element is unstuck. Mozilla docs say "Sticky positioning is a hybrid of relative and fixed positioning.", both of which respect z-order.

However, in the polyfill implementation, it toggles between static and fixed positioning (rather than relative and fixed), and the static positioning ignores z-index.

So, if you have a sticky element positioned on top of a background element, the native version will show it correctly, but the polyfill will only show it when stuck.

Is there a reason for using static in the polyfill rather than relative?

i am having some problems with fixedsticky.js in fallback browsers when the browser is resized.

The first problem is when a sticky element contains floats inside that stack differently depending on the layout width/height. It seems like it has something to do with the recalculating the height of the fixedsticky element?

The other problem is also related to resizing, my bottom div with fixedsticky, fails to stick after resize (this element also contains floated elements inside).

Is there a way of refreshing the plugin on window resize?

Thanks

Ps: Using the latest OSX Mavericks with latest Chrome, Firefox and Opera.