All Projects → yairEO → Stickyfloat

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.

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
Xzoom
jQuery Zoom Gallery plugin
Stars: ✭ 120 (-27.71%)
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
Metismenu
Related projects
Stars: ✭ 1,904 (+1046.99%)
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].