yaireo/stickyfloat

This plugin makes it possible to have a fixed position element that is relative to it’s parent. A normal fixed positioned element would be “out of context” and is very difficult to use in the most common situations with fluid designs. This plugin solves that problem with as little code as I could possible get it so it will run in the most optimized way, while also allow you to customize it in many important ways which might suit you best.

stickyfloat

This plugin makes it possible to have a fixed position element that is relative to it’s parent. A normal fixed positioned element would be “out of context” and is very difficult to use in the most common situations with fluid designs. This plugin solves that problem with as little code as I could possible get it so it will run in the most optimized way, while also allow you to customize it in many important ways which might suit you best.

1.2KB - minified + gziped

9KB - uncompressed

Demo page

Benefits

• Can handle many floated elements, each with it’s own settings
• Floated elements’ movement can be bound inside their parents’ area
• Uses Native javascript easing, but using CSS3 transitions would be the optimum (not for IE)
• Has many settings, such as stick to the bottom or animation style
• Code is very maintainable and higly efficient
• Uses requestAnimationFrame with a throttled fall-back

Example – initialize

jQuery('.menu').stickyfloat( {duration: 400} );

Example – update (change settings for a specific element)

jQuery('.menu').stickyfloat('update',{duration : 0, stickToBottom:true });

Example – destroy (no more floating)

jQuery('.menu').stickyfloat('destroy');

Old Browsers (no ES5 support)

Please add this shim before any other script:

<script src='http://cdnjs.cloudflare.com/ajax/libs/es5-shim/2.3.0/es5-shim.js'></script>

##Parameters

Setting	Default / type	what it's for
scrollArea	window / DOM element	The element which stickyfloat should track it's scroll position (for situations with inner scroll)
duration	200 / Number in ms	The duration of the animation in ms
startOffset	0 / Number	The amount of scroll offset in px after the animations kicks in
offsetY	0 / Number	The offset from the top in px when the object is animated
lockBottom	true / Boolean	Set to false if you don’t want your floating box to stop at parent's bottom
stickToBottom	false / Boolean	Make whatever that is “floating” stick to the bottom instead to the top
delay	0 / Number	Delay in milliseconds until the animation starts
easing	linear / String	Easing function (jQuery has only two by default: ‘swing’ & ‘linear’)
cssTransition	false / Boolean	If you wish to manually set your own CSS3 transition styles on the floated element, set this to 'true'
onReposition	undefined / function	A callback to be invoked when the floated element is repositioned. Takes one argument: the element.

stickyfloat's Issues

Questions about `objBiggerThanArea`

We are using this plugin for a sticky sidebar on a page with dynamic height section. (so the sidebar would only be sticky within that section)
But some user reported the sticky sidebar is "broken" sometimes, and it seems they all have small screens like a Macbook Air.
I can reproduce that by resizing the window to have height < the sidebar.
Then I trace down the logic to variable objBiggerThanArea.

So here are the questions:

• Why the animation should not be made when objBiggerThanArea is true?
• Would you consider making this an option?
  • with default value keeping the existing behaviour
  • I can try to submit a PR if accepted

Vertical top position not restored, somehow

Ha there! Nice job on this plugin =]

I noticed that the offsetY param prevents the "float" from reaching the top of it's parent even when there is room/screen for it... Maybe it is a limitation of my testing page structure but...

Could you play around to include a param/feature to center scrolling on parent?!

eg: sticky would try to reach top of parent when scrolling up (and the bottom when scrolling down). If not possible, it would try to stay in the parents "visible" vertical center, which should be the screen center I guess =]

My understanding forthe logic is that if the parent top is visible it should seek it... the same for the bottom side. What do you think?

This would be a awesome feature!!!

Cheers,

Arná

Element sticking on window resize

When the window is resized, the items don't re-position until you scroll. You can see this happening on the demo page (http://dropthebit.com/demos/stickyfloat/stickyfloat.html) as well: make window large, check "Stick to bottom:" in the green box (it floats down and settles), then resize the window to make it less high: the green box stays in position, partially hidden, until you scroll, then it jumps up to stick the new bottom position.

Not working in Chrome or Safari for Mac

Just tested upgrading from 7.5 to 8, and it stopped working. Tested the demo, and it also doesn't work in Safari or Chrome for Mac. Not seeing any console errors, so I'm not sure what's conflicting.

Thanks for a nice plugin!

"fucking jQuery repository shit Oh please"- it's a way better to have all plugins in such a good place as Github. This json files is also nice idea to easy maintenance of plugins site :)

sometimes won't return into original position

hi, first, thank you for the amazing library, it works pretty well.
however I found one problem, when scrolling fast, element will not return to position 0 but will stay in some random position scrolled down (sometimes it's few pixels, sometimes it's over 300px)

I use simple configuration:

$(".float_element").stickyfloat({duration: 0, offsetY: 180});

.float_element {
    position: absolute;
    width: 100%;
    background-color: white;
    padding: 10px 0 10px 0;
    z-index: 100;
    border-bottom: 1px solid #707070;
}

I've tried to change duration, to tens of milliseconds in hope animation/delay will handle it differently, but issue remained same.

Also tried to use ID instead of CLASS, didn't have any effect

How to disable the script on mobile and tablet ?

How can I disable the script on mobile and tablet ?

Multiple sticky elements

Hi there, I was wondering how and if it would be possible to have multiple stickyfloat elements that follow each other up.

For instance, i have multiple articles with big images in them, i want to have the description stuck until you reach the next article. Currently all the stickyfloat elements start being sticky when the first one is... Here is the demo http://ckdt.net/code/

I used this code
$(function() { $( ".post header" ).each(function() { $(this).stickyfloat( { duration: 400 } ); }); });

Resize error in IE8

I'm not sure how much you will be willing to fix this, but here is an issue that I've just spotted in IE8 and IE7 (yes, someone still tests in this browser in 2015). The following chunk of code causes an exception:

$(w).on('resize.sticky', function(){
    raf( that.rePosition.bind(that) )  // Object does not support this property or method
});

The reason is that bind was introduced only in IE9 is therefore not a function in earlier versions. How about replacing this with something more robust?

I disabled stickyfloat in IE8 and IE7 for now – it’s use is not that crucial in my project. But I might be still not the only person to develop for old good g̶o̶o̶d̶ IEs.

One more thing, it's more about the performance. Would not it be reasonable to throttle calls to the resize handler? One little window move causes a whole lot of exceptions in IE8 and this suggests that reducing the number of calls, say to max 1 in 50 ms, will be useful in modern browsers.

Not working on Chrome for windows with the latest version of stickyfloat.js

I don't verified in the code but I compared the latest version and the 7.5 and it works on this last. The 7.5 is successfully executed. It's just an information, you're free to consider my message as spam.
Thanks!

The Firefox console says: "TypeError: $(...).stickyfloat is not a function"

Hello,

I have put the latest version of jQuery, I have put the StickyFloat script under the jQuery one and initialize the script with "$('#menu').stickyfloat( {duration: 400} );" when the DOM has been loaded.

But, when the DOM has been loaded, in the console of Firefox, this error message displays : "TypeError: $(...).stickyfloat is not a function" and all the functions after the StickyFloat initialization don't run.

Coul'd you help me to solve this problem?

Thank you in advance,
Best regards,
Yulaan

Not work in IE

Why don't work in IE? in the link bar appear the #section selected in the menu and this don't easing and it's cupper in the top

Not working on ajax loaded conntent

I am trying to use sticky float on Ajax loaded content. Before ajax load its works fine but after ajax success sticky float stops working.

I have initialized sticky float after Ajax success but no go.

Any idea how to implement this plugin on Ajax loaded content.

destroy not working

I'm getting 'that' not defined error. :(

Sticking not first element

Hi. Is it possible to make sticky not Menu 2 (like in example - http://dropthebit.com/demos/stickyfloat/stickyfloat.html) but the next element in sidebar under menu? And menu2 should stay fixed.

As a user, I would like elements that have a height > the viewport to be handled more elgantly

First of all, great plugin!

This is an enhancement request.

Currently, if stickyfloat is applied to an element that has a height > than the viewport size (ie. the stickfloat element extends from the top of the screen down past the bottom) the element loses its stickiness.

To reproduce this, please do the following:

1. Go to your demo page, http://dropthebit.com/demos/stickyfloat/stickyfloat.html, and resize the height of the browser window so that it is < the height of the menu 2 element
2. Verify that the element is no longer sticky, it will scroll off the page

In a scenario like the one I described above, I would I think it would be great if:

1. The element stayed stuck to the top of the page until the user scrolled to the bottom of the page
2. Once the user has scrolled to the bottom of the page, the sticky element would stick to the bottom of it's parent container

Thanks!

Dean

demo error

on demo page http://yaireo.github.io/stickyfloat/
checked "Stick to bottom" and unchecked "Bind to parent's bottom"
the float div will disappeared to the bottom which cannt be see!

osx 10.10.1 and newlast chrome