Home > Web Front-end > JS Tutorial > JS implements display/hide window fixed position elements as the page scrolls_javascript skills

JS implements display/hide window fixed position elements as the page scrolls_javascript skills

WBOY
Release: 2016-05-16 15:13:26
Original
1587 people have browsed it

The 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 less than a certain height or the page is scrolled up, the element is hidden.

Let me show you the renderings first:

1.html

<p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p> 
Copy after login

2.css

p#selected-case-count{
position:fixed; /*固定元素位置*/
top:2px; /*距顶端举例*/
right:40px; /*距右侧位置*/
color:red; 
}
Copy after login

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

The above is the knowledge that the editor has shared with you about JS implementation of displaying/hiding fixed-position elements in windows as the page scrolls. I hope it will be helpful!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template