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 相关文章推荐
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
JavaScript 函数惰性载入的实现及其优点介绍
Aug 12 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
JavaScript实现判断图片是否加载完成的3种方法整理
Mar 13 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
JSON遍历方式实例总结
Dec 07 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 Javascript
Vue三种常用传值示例(父传子、子传父、非父子)
Jul 24 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 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
怎样辨别一杯好咖啡
2021/03/03 新手入门
PHP图片自动裁切应付不同尺寸的显示
2014/10/16 PHP
php根据日期显示所在星座的方法
2015/07/13 PHP
PHP利用APC模块实现大文件上传进度条的方法
2015/10/29 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
详解PHP使用日期时间处理器Carbon人性化显示时间
2017/08/10 PHP
一个简单的javascript类定义例子
2009/09/12 Javascript
关于html+ashx开发中几个问题的解决方法
2011/07/18 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
Javascript学习笔记之 对象篇(四) : for in 循环
2014/06/24 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
2015/03/17 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
JavaScript 对象深入学习总结(经典)
2015/09/29 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
Vue.js常用指令汇总(v-if、v-for等)
2016/11/03 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
Vue如何实现组件的源码解析
2017/06/08 Javascript
nodejs开发微信小程序实现密码加密
2017/07/11 NodeJs
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
webpack 从指定入口文件中提取公共文件的方法
2018/11/13 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
使用paramiko远程执行命令、下发文件的实例
2017/10/01 Python
python合并已经存在的sheet数据到新sheet的方法
2018/12/11 Python
自定义django admin model表单提交的例子
2019/08/23 Python
Python学习之os模块及用法
2020/06/03 Python
表达自我的市场:Society6
2018/08/01 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
心理健康心得体会
2014/01/02 职场文书
《四季》教学反思
2014/04/08 职场文书
2014年作风建设心得体会
2014/10/22 职场文书
如何理解Vue前后端数据交互与显示
2021/05/10 Vue.js