The offset () method in jquery uses the example

JQuery 1.2 adds this function.

Jqueryobject.offset ([coordinates])

Attention:

1. If the coordinates parameter is omitted, the offset location is obtained, or the offset location is set if the argument is specified. 2. The "Set" action of the offset () function is for each element that matches the current jquery object; The read operation is only for the first matching element.

1. Get the position of element relative to document

The acquisition position is the position information of the element relative to the document, which is usually the coordinate value of the element.

Left displacement of element relative to document
$ ("#some-id"). Offset (). Left
The upper displacement of elements relative to document
$ ("#some-id"). Offset (). Top

2, set the location of the element relative to the document

When you set the element offset, you need the element to have a positioned style, namely: relative, absolute, fixed, and so on, except for the static Position property value. Actually here, I have not understood, why have static this position attribute value, not directly is relative? This asks for a moment to press and continue to say jquery's offset () usage.

Sets the displacement of an element relative to the document, and the position of the element must be a non-static value
$ ("#some-id"). Offset ({left:123,top:99});

Attention:

It should be noted that the set value of offset, must be in pairs, otherwise it will be the error of Oh!

Offset can not only set individual elements, you can also set different coordinates of multiple elements, without the need for jquery.each operations, such as:

$ (". Some-class"). Offset (function (index,coords)
{
Index is element indexed
Coords is the coordinates of the element: top, left
function must return coordinate value
return {Top:ccoordsoord.top+index,left:coords.left+index};
});

Experiment:

The top of offset () is the distance between the element and the document, not the top edge of the browser's current form, as shown in Figure 1.

Figure 1:document Height exceeds window,window the scroll bar appears, dragging the scroll bar, and submitting the button offset (). Top is unchanged because the button is not at the same distance as the edge of the document.

　　

The div in Figure 2:document has a scroll bar and the offset () of the Submit button. Top changes with the div scroll bar, because the distance between the button and the edge of the document has changed.

　　

Offset (). Left in the same vein.

Through the above experiment we can draw the following conclusion: offset () to get the element (HTML element) from the top edge of the document, the left edge of the pixel, we only know the browser document is that part of the correct use of offset (). About document can read JQuery window, document, body

Application:

1. So how do we ensure that the elements are fully displayed in the browser window? We can combine offset and scrolltop to achieve.

What is the value that scrolltop gets? According to my experiment, only the element has a scroll bar, and the scroll is a certain distance, only scrolltop value, no scroll bar element scrolltop=0.

The button has no scroll bar, its scrolltop constant equals 0.

I used to have the wrong perception that the elements in document have the same scrolling value as the document, which is wrong, and that the child elements are independent of the container's scrolling value.

According to Figure 1 (document has scroll bar), the control needs to calculate the offsettop, height,document scrolltop;

In Figure 2 (document without scroll bar), calculate the control's offsettop, height

2. Floating div stays in place when the scroll bar scrolls

As shown in Figure 1,

var firsttop = $ ("Floating div"). Offset (). Top;
var top = firsttop + $ (document). ScrollTop ();
$ (floating div). Offset ({top:top});
As shown in Figure 2,

var top = $ (floating div). Offset (). Top;
$ ("floating div"). Offset ({top:top});