JS实现随页面滚动显示/隐藏窗口固定位置元素
更新时间：2016年02月26日 09:06:51 作者：T.//王大胖
窗口固定位置显示元素，当页面高度大于某高度，并且页面向下滚动时，显示该元素；当页面位置小于某高度，或者页面向上滚动时，隐藏该元素，下面通过本文给大家介绍JS实现随页面滚动显示/隐藏窗口固定位置元素，需要的朋友参考下吧
窗口固定位置显示元素，当页面高度大于某高度，并且页面向下滚动时，显示该元素；当页面位置小于某高度，或者页面向上滚动时，隐藏该元素。
先给大家展示下效果图：
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();
});
});
以上所述是小编给大家分享的JS实现随页面滚动显示/隐藏窗口固定位置元素的相关知识，希望对大有所帮助！
相关文章
这篇文章主要介绍了JS原型对象操作,结合实例形式分析了JS原型对象基本原理、用法及操作注意事项,需要的朋友可以参考下2020-06-06
setTimeout( ) 是属于 window 的 method, 但我们都是略去 window 这顶层容器名称, 这是用来设定一个时间, 时间到了, 就会执行一个指定的 method，下面这篇文章主要给大家介绍了关于setTimeout时间设置为0的相关资料，需要的朋友可以参考下。2018-03-03
for 循环是出现最早，也是应用最普遍的一个遍历，能够满足绝大多数的遍历。可以遍历 数组、对象、字符串。本文将详细为大家介绍JS中的六种For循环的使用，需要的可以参考一下2022-04-04
这篇文章主要介绍了JavaScript实现滑动选择日期功能，基于sui-mobile的移动端实现，感兴趣的小伙伴们可以参考一下2016-06-06
下面小编就为大家带来一篇Javascript获取随机数的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-06-06
使用Jquery的时候发现它里面的很多方法都提供回调函数，接下来通过本篇文章给大家介绍js自定义回调函数，需要的朋友参考下2015-10-10
相信大家现在都知道微信小程序吧，下面这篇文章主要给大家介绍了微信小程序开发之map地图的相关资料，分享出来供大家参考学习，文中通过示例代码介绍的非常详细，需要的朋友们下面跟着小编来一起学习学习吧。2017-06-06
今天小编就为大家分享一篇JS的Ajax与后端交互数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
css样式标签和js语法属性区别。需要的朋友可以过来参考下，希望对大家有所帮助2013-11-11
echarts实现平面的柱状图很顺利,但是用户为了美观立体感,用到圆柱体图,下面这篇文章主要给大家介绍了关于ECharts绘制立体柱状图(圆柱体)的相关资料,需要的朋友可以参考下2023-11-11
最新评论