JS achieves scrolling display/hiding of fixed position elements in the window, js window

JS achieves scrolling display/hiding of fixed position elements in the window, js window

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.

First, we will show you:

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();});});

The above is a small part of the JS Implementation of rolling display/hiding the fixed position elements of the window with the page. I hope it will be of great help!

Articles you may be interested in:

• Js textarea automatically increases and hides the scroll bar
• How to locate a fixed layer in js
• Example of a fixed-position floating window implemented by javascript
• How to display js control elements at fixed positions on the screen and monitor screen height changes