A brief discussion on the scroll position scrollTop and scrollLeft_jquery of jQuery pages

Web pages are often larger than the browser window that displays the page. Because Web documents have a lot of content, they often result in the page being taller and sometimes wider than the browser, which forces visitors to scroll. View the entire page (shown in Figure 10-8). As visitors scroll, parts of the document disappear from view. For example, a web page does not fit completely into the browser window, and the document scrolls to the left or up, so that the top and left sides of the page disappear from view. This means that the upper left corner of the browser window and the upper left corner of the document are not the same. If you try to place a new element, for example, a dynamic banner at the top of the screen, you'll run into trouble if you just try to set the element's left and top positions to 0. You're actually just placing it at the top of the document, but but outside the browser window.

Fortunately, jQuery provides two functions that allow you to determine how much of the page is scrolled from the top and left (in other words, how many pixels of the document exist above and to the left of the browser window). To determine how much of the document is above the browser window, use this line of code:

Copy code The code is as follows:

$(document).scrollTop()

To determine how much of the document is on the left side of the screen, use this line of code:

Copy code The code is as follows:

$(document).scrollLeft()

Both functions return a pixel value that you can use to position another element on the page. For example, if you want to position a popup in the center of the page even after someone scrolls down, you need to determine how far the visitor has scrolled and move the popup so that many of the additional elements are bottom of the page. In the example of a tooltip that pops up, you need to be careful when locating the tooltip when the visitor has scrolled down a page: it is easy to accidentally place the tooltip in the page space, but in the browser's view. outside the visible area of ​​the mouth. Use scrollTop() to avoid placing a tooltip above the visible area at the top of the browser window.

The above is the entire content of this article, I hope you all like it.