Scroll bar event, jquery scroll bar event

Scroll bar event, jquery scroll bar event

I have been wondering how to monitor the events of the scroll bar. Now I understand it.

The following code is the supervisorMove as long as you listen to the scroll bar, The lower returns the div display and hidden code at the top.

window.onscroll = function () {           var t = document.documentElement.scrollTop || document.body.scrollTop;           if (t > 0) {               $(".cbbfixed").css("bottom", "10px");           } else {               $(".cbbfixed").css("bottom", "-85px");           }       }

Note: t: the distance from the scroll bar to the top

T> 0, that is, once the scroll bar is rolled, the if () Statement is executed immediately. The code in else () is that when the scroll bar reaches the top, the div at the top is returned to hide

Return to the top button click operation

       $("#cgotop").click(function(){           $('body,html').animate({ scrollTop: 0 }, 100);           return false;       });

Supplement:

1. Listen to the scroll bar event of an element

$ (Selector). scroll (function (){.......});

2. Get the scroll distance of the scroll bar

$ (Selector). scrollTop (); $ (selector). scrollLefft ();

 

Jquery determines whether the scroll bar has reached the bottom. How can it determine whether the scroll bar has reached the top?

$ (Document). scrollTop () gets the vertical scroll distance, that is, the distance from the top of the current tumble window to the top of the entire page
$ (Document). scrollLeft () This is the distance to obtain the horizontal scroll bar.
Do you understand ??
To get the top, you only need to get scrollTop () = 0, which is the top.

To get the bottom, you only need to get scrollTop () >=$ (document). height ()-$ (window). height () to know whether the scroll ends.

$ (Document). height () // gets the height of the entire page
$ (Window ). height () // obtain the height of the page that can be viewed by your browser. The size of the page varies with the document size when you zoom in the browser window.

In fact, you can do an experiment on your own.
$ (Document). scroll (function (){
$ ("# Lb"). text ($ (document). scrollTop ());
})
<Span id = "lb" style = "top: 100px; left: 100px; position: fixed;"> </span> <! -- A fixed span label is easy to view when scrolling -->

How to obtain scroll events of web pages

Window. onscroll = function
{
... Code...
}