Display/hide fixed position elements and window elements as pages scroll

Display/hide fixed position elements and window elements as pages scroll

0. Effect

An element is displayed at a fixed position in the window. When the page height is greater than a certain height and the page is scrolled down, the element is displayed. When the page position is smaller than a certain height or the page is scrolled up, the element is hidden.

1. html

<P id = "selected-case-count"> <span class = 'form-control'> selected: <span class = "casecount"> 0 </span> </p>

2. css

P # selected-case-count {position: fixed;/* fixed element position */top: 2px;/* example from top */right: 40px; /* from the right side */color: red ;}

3. js

$ (Function () {$ ("# selected-case-count "). hide () ;}); var preTop = 0; var currTop = 0; $ (function () {$ (window ). scroll (function () {currTop = $ (window ). scrollTop (); if (currTop <preTop) {$ ("# selected-case-count "). fadeOut (200);} elseif ($ (window ). scrollTop ()> 600) {$ ("# selected-case-count "). fadeIn (500);} else {$ ("# selected-case-count "). fadeOut (500);} preTop = $ (window ). scrollTop ();});});