Home >Web Front-end >JS Tutorial >Use JS to display/hide window fixed position elements as the page scrolls
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. This article will introduce it to you below. JS realizes displaying/hiding the window fixed position element as the page scrolls. Friends who need it can refer to it
Window fixed position display element. When the page height is greater than a certain height and the page scrolls down, the element is displayed; when The element is hidden when the page position is less than a certain height, or when the page scrolls upward.
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>
2.css
p#selected-case-count{ position:fixed; /*固定元素位置*/ top:2px; /*距顶端举例*/ right:40px; /*距右侧位置*/ 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 the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website! Related recommendations:
How to implement three-level linkage using Vue2
How to use singly linked lists and circular linked lists in JavaScript
How to solve the problem of pull-down refresh at the top of mobile browser
##
The above is the detailed content of Use JS to display/hide window fixed position elements as the page scrolls. For more information, please follow other related articles on the PHP Chinese website!