JavaScript 实现滚动时固定位置元素的显示与隐藏
作者:代码拾荒时间:2026-10-29 22:28:15浏览:487
本文介绍如何使用 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 实现随页面滚动动态控制固定位置元素显示与隐藏的方法,希望能对读者有所帮助。
作者最新文章
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
JavaScript函数定义的三种方式:声明、表达式与箭头函数
2026-11-05 13:50:55
JavaScript中escape、encodeURI和encodeURIComponent对空格的处理差异
2026-11-05 12:47:23
