JS实现随页面滚动显示/隐藏窗口固定位置元素


Posted in Javascript onFebruary 26, 2016

窗口固定位置显示元素,当页面高度大于某高度,并且页面向下滚动时,显示该元素;当页面位置小于某高度,或者页面向上滚动时,隐藏该元素。

先给大家展示下效果图:

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实现随页面滚动显示/隐藏窗口固定位置元素的相关知识,希望对大有所帮助!

Javascript 相关文章推荐
Prototype源码浅析 Number部分
Jan 16 Javascript
无缝滚动js代码通俗易懂(自写)
Jun 19 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
JS正则匹配中文的方法示例
Jan 06 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
一个简易的js图片轮播效果
Jul 22 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
浅谈vue3中effect与computed的亲密关系
Oct 10 Javascript
JS实现轮播图效果
Jan 11 Javascript
JavaScript 闭包的使用场景
Sep 17 Javascript
学习使用jquery iScroll.js移动端滚动条插件
Mar 24 #Javascript
AngularJS整合Springmvc、Spring、Mybatis搭建开发环境
Feb 25 #Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 #Javascript
javascript动态获取登录时间和在线时长
Feb 25 #Javascript
基于javascript实现动态时钟效果
Aug 18 #Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 #Javascript
灵活的理解JavaScript中的this指向
Feb 25 #Javascript
You might like
这部番真是良心,画质好到像风景区,剧情让人跟着小公会热血沸腾
2020/03/10 日漫
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
PHP编程实现计算抽奖概率算法完整实例
2017/08/09 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
如何用js控制css中的float的代码
2007/08/16 Javascript
jQuery 全选效果实现代码
2009/03/23 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
JS模拟自动点击的简单实例
2013/08/08 Javascript
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
举例讲解如何判断JavaScript中对象的类型
2016/04/22 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
javascript 中iframe高度自适应(同域)实例详解
2017/05/16 Javascript
微信小程序支付前端源码
2018/08/29 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
2018/10/12 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
Vue开发中常见的套路和技巧总结
2020/11/24 Vue.js
定制FileField中的上传文件名称实例
2017/08/23 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
Python实现多进程的四种方式
2019/02/22 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
python多线程案例之多任务copy文件完整实例
2019/10/29 Python
PythonPC客户端自动化实现原理(pywinauto)
2020/05/28 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
基于DOM+CSS3实现OrgChart组织结构图插件
2016/03/02 HTML / CSS
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
高级护理专业毕业生推荐信
2013/12/25 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
2014年小学生迎国庆65周年演讲稿
2014/09/27 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
歼十出击观后感
2015/06/11 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python