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.
Stars: ✭ 166
Projects that are alternatives of or similar to Stickyfloat
Hc Sticky
JavaScript library that makes any element on your page visible while you scroll.
Stars: ✭ 375 (+125.9%)
Mutual labels: jquery-plugin, sticky, jquery
Jquery Menu Editor
Multilevel Menu Editor for Bootstrap 4.x (Html & Javascript code)
Stars: ✭ 144 (-13.25%)
Mutual labels: jquery-plugin, jquery
Convform
A jQuery plugin that transforms a form into an interactive chat.
Stars: ✭ 141 (-15.06%)
Mutual labels: jquery-plugin, jquery
Image Select
Image Select is an extension of Chosen, a jQuery plugin that makes long, unwieldy select boxes much more user-friendly. It provides image support for Single and Multi select HTML tags.
Stars: ✭ 145 (-12.65%)
Mutual labels: jquery-plugin, jquery
Jquery.fbmessenger
Fake Facebook Messenger interactions on an iPhone with a simple jQuery plugin!
Stars: ✭ 130 (-21.69%)
Mutual labels: jquery-plugin, jquery
Slide And Swipe Menu
⚡️ A sliding swipe menu that works with touchSwipe library.
Stars: ✭ 135 (-18.67%)
Mutual labels: jquery-plugin, jquery
Viewport.jquery
viewport.jquery - simple but handy jQuery plugin adding methods and CSS selectors to check if element is in certain viewport
Stars: ✭ 156 (-6.02%)
Mutual labels: jquery-plugin, jquery
Jquery Connections
Add stylable lines connecting page elements. ⮑ Handy for visualizing relations and graph edges. ⮐
Stars: ✭ 151 (-9.04%)
Mutual labels: jquery-plugin, jquery
Magnificent.js
🔍 Zoom responsively, images & more, w/ jQuery.
Stars: ✭ 153 (-7.83%)
Mutual labels: jquery-plugin, jquery
Jquery Scrollstop
A jQuery plugin that fires events when scrolling stops and starts.
Stars: ✭ 158 (-4.82%)
Mutual labels: jquery-plugin, jquery
Checkboxes.js
☑️ A jQuery plugin that gives you nice powers over your checkboxes.
Stars: ✭ 127 (-23.49%)
Mutual labels: jquery-plugin, jquery
Jquery Confirm
A multipurpose plugin for alert, confirm & dialog, with extended features.
Stars: ✭ 1,776 (+969.88%)
Mutual labels: jquery-plugin, jquery
Fotorama
A simple, stunning, powerful jQuery gallery.
Stars: ✭ 1,567 (+843.98%)
Mutual labels: jquery-plugin, jquery
Jquery jeditable
jQuery edit in place plugin. Extendable via plugin architecture. Plugins for plugin. Really.
Stars: ✭ 1,756 (+957.83%)
Mutual labels: jquery-plugin, jquery
Balancedgallery
A balanced photo gallery plugin for jQuery.
Stars: ✭ 158 (-4.82%)
Mutual labels: jquery-plugin, jquery
Jquery Rwdimagemaps
Responsive Image Maps jQuery Plugin
Stars: ✭ 1,511 (+810.24%)
Mutual labels: jquery-plugin, jquery
Isonscreen
Simple jQuery plugin to determine if an element is within the viewport
Stars: ✭ 115 (-30.72%)
Mutual labels: jquery-plugin, jquery
Jquery.serializeobject
Encode a set of form elements as a JSON object for manipulation/submission.
Stars: ✭ 149 (-10.24%)
Mutual labels: jquery-plugin, jquery
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. |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].