Handling scroll into view using Jquery position
This article will help you handle situations where you want the content to scroll into view. Suppose we have a content that flows beyond the container, we can scroll this into view. JQuery position() helps you flip the content to fit into the container.
There are instances when we want an inline content to appear in the view. Suppose it extends beyond the view we might as well want it to scroll into view. One way of achieving this is through the JQuery position().
JQuery position method allows to retrieve the current position of the element in question relative to the parent offset.
$("#element").position({
my: "center top",
at: "right bottom",
of: $container,
collision: "flipfit flipfit"
});
Here,
1. "#element" - is the element to be positioned
2. my - the position of the element to be aligned with the target element.Default
is center. If you mention only a single value then it would be taken as follows,
my : "top" is normalized as "center top" , "right" as "right center"
Acceptable horizontal values : "center", "right", "left"
Acceptable vertical values : "center", "top", "bottom"
3. of - element to position against. Default is null.
4. collision - The alternative position when the positioned element overflows in a
particular direction. Default is "flip"
Acceptable values : "flip", "flipfit", "fit", "none"
fit - shift the element away from the edge of the window.
flip - Flips the element to the opposite side of the target. Gets the position
that best fits the element.
flipfit - flips element to a allowing the element to be visible.
none - no collision applied.
5 using - is a callback function. Default is null.
The property setting is delegated to this function.
6 within : mentions the container. Default is window.
Thanks,
Ashwini Rupert