本文介绍如何使用 JavaScript 和 jQuery 实现页面滚动时固定位置元素的动态显示与隐藏。通过监听 scroll 事件，比较当前滚动位置与上一位置，结合阈值判断，控制元素在向下滚动超过指定高度时淡入显示，向上滚动或低于阈值时淡出隐藏。
固定元素显隐逻辑说明
实现一个固定在窗口位置显示的 HTML 元素，其显隐逻辑如下：当页面滚动高度超过设定阈值且用户正在向下滚动时，该元素显示；若页面滚动高度低于该阈值，或者用户正在向上滚动，则隐藏该元素。
首先展示最终的运行效果：
HTML 结构如下：
HTML 与 CSS 实现
<p id="selected-case-count"><span class='form-control'>已选: <span class="casecount">0</span></span></p> CSS 样式定义：
JavaScript 滚动监听代码
p#selected-case-count{
position:fixed; /*固定元素位置*/
top:2px; /*距顶端举例*/
right:40px; /*距右侧位置*/
color:red;
}JavaScript 逻辑实现：
$(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();
});
});以上分享了利用 JavaScript 实现随页面滚动动态控制固定位置元素显示与隐藏的方法，希望能对读者有所帮助。