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 实现随页面滚动动态控制固定位置元素显示与隐藏的方法,希望能对读者有所帮助。

作者最新文章